Reducer：获取商店价值变化的信息

Question

我不明白如何从 reducer 存储中获取更新值。例如，我有一个 React 组件。在这个组件中，在一些动作之后，例如，在按钮上点击几下之后，我从我的 reducer 动作脚本中调用动作，如 this.props.PostSomethingToServer()。然后该动作将一些数据发送到节点快递服务器。服务器对数据进行一些更改，然后将响应发送到客户端存储减速器。如何从 reducer store 获取更新后的数据？我需要使用更新后的值调用此 React 组件中的另一个函数。顺便说一下，我在 React 组件中使用 mapStateToProps 和 export default connect()。据我所知，mapStateToProps 和 export default connect() 有助于在 render() 之前从商店获取数据。但是我仍然不明白如何在执行某些操作后从商店获取更新的数据。一些代码：反应组件：

ChangeArrayData(){
let something = [];
// filling this array and modifying values
//then I call the action
this.props.postSomethingToServer(something);//something will be changed by server logic and will be returned with updated data by a response.
//then I wanna export the data to .excel, for example
this.ExportToExcel(); // here I have to get updated data from the reducer, but I don't have any information about changes in the reducer.
}

减速器作用：

export const postSomethingToServer= rankedElements => dispatch => {
    axios
      .post("/api/postData", elements)
      .then(response => {
        dispatch({
          type: POST_SOMETHING_SUCCESSFUL,
          status : "success",
          payload:  response.data
        });
//... etc.

减速器：

const initialState = {
    something: {},
    status: "",
    error : ""
};

export default function(state = initialState, action) {
  switch (action.type) {
    case POST_SOMETHING:
      return {
        ...state,
        status: action.status,
      }
    case POST_SOMETHING_SUCCESSFUL:
      return {
        ...state,
        status: action.status,
        something: action.payload 
      }
    case GET_ERRORS:
      return {
        ...state,
        status: action.status,
        error: action.error
      }
    default:
      return state;
  }
}

Answer 1

调度操作后，reducer 状态 something 应该具有您期望的数据。鉴于您已经在 mapStateToProps 函数中映射了数据，您可以通过 props.

访问它

ChangeArrayData() {
  let something = [];
  this.props.postSomethingToServer(something);
  this.ExportToExcel();
  console.log(this.props.somethingReducerState);
}

const mapStateToProps = (state) => ({
  somethingReducerState: state.yourReducerName.something,
});

Answer 2

您应该将 reducer 状态值分配给某些本地状态，如下所示：

`const mapStateToProps = state => ({
 contacts: state.data
 });
 export default connect(mapStateToProps, { actions })
 (withStyles(contactStyle)(Contact));`

这里 'contacts' 是我们在 class 中使用的本地状态名称，'data' 是我们在更新状态后从 reducer return 获得的状态名称。

您可以使用 componentWillReceiveProps 方法访问更新后的数据，例如，

 `componentWillReceiveProps(nextProps) {
    if(nextProps.contacts !== undefined) {
       //Handle updated states here
     }
  }`

Answer 3

我有解决方案：我正在使用 componentWillReceiveProps(nextProps) 并且可以从减速器接收结果。谢谢大家的回答。

Reducer：获取商店价值变化的信息

Reducer: getting information about value changes at the store

reactjs

react-redux

reducers