Question

我对这个问题进行了一些搜索，但发现了很模糊的答案。在redux中，我们知道状态存储为对象。但这个状态实际存储在哪里？它是以某种方式保存为以后可以访问的文件吗？我所知道的是它不会以cookie格式或浏览器的本地存储器存储它。

Answer 1

Redux中的状态存储在Redux存储区的内存中。

这意味着，如果刷新页面，该状态将被消除。

你可以想象商店看起来像这样：

function createStore(reducer, initialState) {
  let state = initialState // <-- state is literally stored in memory

  function getState() {
    return state
  }

  function dispatch(action) {

    state = reducer(state, action) // <-- state gets updated using the returned value from the reducer

    return action
  }

  return {
    getState,
    dispatch
  }
}

redux中的状态只是一个在内存中存在的变量，因为它被所有redux函数引用（通过closure）。

以下是正在发生的事情的简化示例：

＆＃13;

function example() {
  let variableAvailableViaClosure = 0
  
  function incrementTheClosureVariable() {
    variableAvailableViaClosure += 1
  }

  function getTheClosureVariable() {
    return variableAvailableViaClosure
  }

  return {
    incrementTheClosureVariable,
    getTheClosureVariable
  }
}

let data = example()

// at this point example is finished
// but the functions it returned
// still have access to the (internal) variable via closure

console.log(
  data.getTheClosureVariable() // 0
)

data.incrementTheClosureVariable()

console.log(
  data.getTheClosureVariable() // 1
)

＆＃13;

此外，声明

在redux中，我们知道状态存储为对象。

不正确。 redux中的状态可以是任何有效的javascript值，而不仅仅是一个对象。它通常最有意义的是它成为一个对象（或一个特殊的对象，如数组），因为它允许更灵活的数据结构（但你可以使状态只是一个数字，例如，如果你想）

查看实际的Redux implementation了解更多详情。

如果你希望状态持久存在于cookie或localStorage中，你会enhance the store这样，除了更新内存中的状态之外，它还会保存到你想要的存储中（并从该存储加载）当商店初始化时）

Answer 2

状态存储在redux-store中。 Redux Store是一个全球商店，可以在任何地方/任何组件上访问。

让我们考虑使用第三方API获取数据索引的示例。以下代码段使用componentWillMount，它将使用redux操作触发提取调用。

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);

上面的代码片段将使用redux操作获取数据索引。以下代码是redux操作，

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
      })
    })
  }
}

Redux操作会将数据分派给reducer，其中state将在redux store中初始化。以下代码片段是redux-reducer

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

存储在redux存储中的状态将使用函数mapStateToProps进行映射，在上面的组件中实现。现在，您可以使用相应组件中的props访问该状态。 Lifecyclehook componentWillReceiveProps将能够获取状态存储的redux存储。

您可以通过在任何组件中使用store.getState()来访问State。使用reducer状态的唯一缺点是，它会在刷新组件/应用程序时重置状态。有关详细信息，请浏览Reducer Store。

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

2 个答案: