Reducer：获取有关商店价值变化的信息答案

【问题标题】：Reducer: getting information about value changes at the storeReducer：获取有关商店价值变化的信息
【发布时间】：2020-05-31 13:58:39
【问题描述】：

我不明白如何从减速器存储中获取更新的值。例如，我有一个 React 组件。在这个组件中，在一些操作之后，例如，在一个按钮上单击几下之后，我从我的 reducer 操作脚本中调用该操作，例如 this.props.PostSomethingToServer()。然后该操作将一些数据发送到节点快递服务器。服务器对数据进行一些更改，然后向客户端存储减速器发送响应。如何从 reducer 存储中获取更新的数据？我需要使用更新的值调用此 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;
  }
}

【问题讨论】：

你能在问题中添加reducer代码吗？
@AjinKabeer 我刚刚更新了代码

标签： reactjs react-redux reducers

【解决方案1】：

您应该将减速器状态值分配给一些本地状态，如下所示：

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

这里的 'contacts' 是我们在类中使用的本地状态名称，而 'data' 是我们在更新状态后从 reducer 返回的状态名称。

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

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

【讨论】：

感谢您的回答。它不适合我。我曾尝试使用 componentDidUpdate()，但它也不起作用。当我在 reducer 操作脚本中使用 console.log 时，它显示来自服务器的响应数据，但我不明白为什么我在 React 脚本中什么都没有......
如果你使用 redux 来更新你的状态，那么你必须使用 componentWillReceiveProps() 来获取更新的数据，尝试按照上面的答案。

【解决方案2】：

在您发送操作后，您的减速器状态 something 应该有您期望的数据。鉴于您已经在 mapStateToProps 函数中映射了数据，您可以通过 props 访问它。

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

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

【讨论】：

我对@987654325@ 做了类似的事情。我的 consturctor() 中有一个状态对象“something {}”。但是我不知道在从 reducer 更新数据后如何调用 ExportToExcel() 函数。当我调用 ExportToExcel() 函数时，我的 this.state.something 是空的。当 this.state.something 将包含来自服务器的数据时，我必须调用 ExportToExcel()。

【解决方案3】：

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

【讨论】：