blocks|key|4328799|text|状态存储在redux-store中。Redux+Store是一个全局存储，可以在任何地方/任何组件访问。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4328800|让我们考虑一个使用第三方API获取数据索引的示例。下面的代码片段使用componentWillMount，它将使用redux操作触发一个fetch调用。|offset|length|style|CODE|4328801|import+React,+{+Component+}+from+'react';
import+{+connect+}+from+'react-redux';
import+{+fetchDataFromUrl+}+from+'../actions/index.js';


class+Indexdata+extends+Component+{


++constructor(props){
++++super(props);
++++this.state+=+{
++++++text:+''
++++}
++}


++componentWillMount(){
++++let+thisVal+=+this;
++++++thisVal.props.fetchIndexofData()
++}

++componentWillReceiveProps(nextProps){
++++this.setstate({
++++++text:+nextProps.indexData.text
++++})
++}

++render(){
++++return(
++++++<div>
++++++++<Navbar+/>
++++++++<h2+className="prescription-index-title">Index+of+Data</h2>
++++++</div>
++++)
++}
}

function+mapStateToProps(state){
++return{
++++indexData:+state.fetchedData
++}
}

function+mapDisptachToProps(dispatch){
++return+{
++++fetchIndexofData:+()+=>+dispatch(fetchDataFromUrl(access_token))
++};
};

export+default+connect(mapStateToProps,+mapDisptachToProps)(IndexData);|code-block|syntax|javascript|4328802|上面的代码片段将使用redux操作获取数据索引。下面的代码是redux操作，|4328803|export+function+fetchDataFromUrl(){
++return(dispatch)+=>+{
++++const+base_url+=+"https://api_serving_url.com"
++++fetch(base_url,+{
++++++method:+'GET'
++++})
++++.then(response+=>+response.json())
++++.then(data+=>+{
++++++dispatch({
++++++++type:+"INDEX_DATA",
++++++++data:+data
++++++})
++++})
++}
}|4328804|Redux操作将数据分派到reducer，在redux存储中初始化状态。下面的代码片段是redux-reducer|4328805|export+function+fetchedData(state+=+[],+action)+{
++switch(action.type)+{
++++case+"INDEX_DATA":
++++++return+action.data;
++++default:
++++++return+state;+
++}
}|4328806|存储在redux存储中的状态将使用在上面的组件中实现的函数mapStateToProps进行映射。现在，您可以在相应组件中使用props来访问状态。Lifecyclehook+componentWillReceiveProps将能够获取状态存储的redux存储。|4328807|您可以通过在任何component.The中使用store.getState()的方式访问状态，使用reducer状态的唯一缺点是，当您刷新组件/应用程序时，它将重置状态。有关更多信息，请访问Reducer+Store。|4328808|entityMap|0|LINK|mutability|MUTABLE|url|https://redux.js.org/api-reference/storehttp://^0|0|Y|I|0|0|0|0|0|0|T|F|2G|P|0|O|G|2O|D|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|1F|8|@$D|1G|E|1H|F|G]|$D|1I|E|1J|F|G]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1K|8|@$D|1L|E|1M|F|G]]|9|@$D|1N|E|1O|1|1P]]|A|$]]|$1|Y|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

<p>States are stored in redux-store. Redux Store is a global store which can be accessed anywhere/any components.</p>

<p>Let consider an example of getting Index of data using third party API. The following snippet uses <code>componentWillMount</code> which will trigger a fetch call using redux action.</p>

<pre><code>import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchDataFromUrl } from '../actions/index.js';


class Indexdata extends Component {


  constructor(props){
    super(props);
    this.state = {
      text: ''
    }
  }


  componentWillMount(){
    let thisVal = this;
      thisVal.props.fetchIndexofData()
  }

  componentWillReceiveProps(nextProps){
    this.setstate({
      text: nextProps.indexData.text
    })
  }

  render(){
    return(
      &lt;div&gt;
        &lt;Navbar /&gt;
        &lt;h2 className="prescription-index-title"&gt;Index of Data&lt;/h2&gt;
      &lt;/div&gt;
    )
  }
}

function mapStateToProps(state){
  return{
    indexData: state.fetchedData
  }
}

function mapDisptachToProps(dispatch){
  return {
    fetchIndexofData: () =&gt; dispatch(fetchDataFromUrl(access_token))
  };
};

export default connect(mapStateToProps, mapDisptachToProps)(IndexData);
</code></pre>

<p>The above snippet will fetch index of data using a redux action. The below code is a redux action,</p>

<pre><code>export function fetchDataFromUrl(){
  return(dispatch) =&gt; {
    const base_url = "https://api_serving_url.com"
    fetch(base_url, {
      method: 'GET'
    })
    .then(response =&gt; response.json())
    .then(data =&gt; {
      dispatch({
        type: "INDEX_DATA",
        data: data
      })
    })
  }
}
</code></pre>

<p>Redux action will dispatch data to reducer, where state will be initialized in redux store. The following code snippet is redux-reducer</p>

<pre><code>export function fetchedData(state = [], action) {
  switch(action.type) {
    case "INDEX_DATA":
      return action.data;
    default:
      return state; 
  }
}
</code></pre>

<p>State stored in redux store will be mapped using function <code>mapStateToProps</code>, implemented in the above component. Now you can access the state using props in the respective component. Lifecyclehook <code>componentWillReceiveProps</code> will be able to fetch the state stored redux store.</p>

<p>You can access the State by means of using <code>store.getState()</code> in any  component.The only drawback of using reducer state, is that it will reset the state when you refresh the component/application. Go through <a href="https://redux.js.org/api-reference/storehttp://" rel="nofollow noreferrer">Reducer Store</a> , for more information.</p>


<p>I searched a bit about this question but found very vague answers. In redux, we know that the state is stored as an object. But where is this state stored actually? Is it somehow saved as a file which can be accessed by us later on? What I know is that it does not store it in a cookie format or in the browser's local storage.</p>


In Redux, where does the state actually get stored?

数据索引

我搜索了一下这个问题，但找到了非常模糊的答案。在redux中，我们知道状态被存储为对象。但是这个状态到底存储在哪里呢？它是不是以某种方式保存为一个文件，以便我们以后可以访问？我所知道的是，它不会以cookie格式或在浏览器的本地存储中存储它。

问在Redux中，状态实际上存储在哪里？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Redux中，状态实际上存储在哪里？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Redux中，状态实际上存储在哪里？
EN