将 props 传递给 redux 初始状态答案

【问题标题】：Pass props to redux initial state将 props 传递给 redux 初始状态
【发布时间】：2019-12-05 02:11:27
【问题描述】：

我想根据我从 Home.js 获得的现有道具在 reducer.js 中设置初始状态

我尝试调用home: this.props.homedata 设置初始状态，但它不起作用。

import { COMMENT_SHOW, LIKE_SHOW, HOMEDATA_SHOW } from '../actions/types';

const INITIAL_STATE = {
    wallid: '',
    comment: '',
    like: '',
    home: this.props.homedata
};
export default (state = INITIAL_STATE, action) => {
........///////////
}

Reducer.js

当应用加载时，我想在家中获得与homedata 状态相同的数据

【问题讨论】：

不确定这是否是最好的方法，但您可以在诸如 ComponentDidMount 之类的生命周期方法中调用您的操作（通常用于更新主页）。
我添加了 if else 条件来解决 mapststetoprops 中的问题。如果 reducer 将 homedata 返回为空白，那么在我的 mapstatetoprops 中，homedata 将分配给当前 props，否则它将从 reducer 获取状态。

标签： redux react-redux redux-thunk

【解决方案1】：

我认为不可能将 prop 传递给减速器。你可以做的是有一个数据集文件，比如data.js，然后导出你的数据。将其导入您的 reducer 文件，并将其设置为您的初始数据。

import { COMMENT_SHOW, LIKE_SHOW, HOMEDATA_SHOW } from '../actions/types';
import { homeData } from 'path/to/data';

const INITIAL_STATE = {
    wallid: '',
    comment: '',
    like: '',
    home: homedata,
};
export default (state = INITIAL_STATE, action) => {
........///////////
}

如果您不希望在应用运行时修改示例数据。也许您需要它来重置您的家庭数据，您需要先克隆数据，然后再将其传递到您的初始状态。

【讨论】：

【解决方案2】：

reducer 没有props。你可能从 React 中学到了它。

reducer 应该根据调度的操作更新 Redux 状态。要将状态更新为homedata，您可以调度一个操作并将reducer 中的数据作为新状态返回。

// action to dispatch
{
   type: "UPDATE_HOME",
   payload: homedata
}

// Reducer.js
const INITIAL_STATE = {
    wallid: '',
    comment: '',
    like: '',
    home: {}
};
export default (state = INITIAL_STATE, action) => {
  switch(action.type) {
    case "UPDATE_HOME":
      return {
        ...state,
        home: action.payload
      };
    default:
      return state;
  }
}

【讨论】：

我添加了 if else 条件来解决问题。如果 reducer 返回 homedata 为空白，那么在我的 mapstatetoprops 中 homedata 被分配给当前的 props，否则它将从 reducer 获取状态。顺便说一句，谢谢你帮助我