将 props 传递给 redux 初始状态

Posted 2023-02-22

【中文标题】将 props 传递给 redux 初始状态

【英文标题】：Pass props to redux initial state

【发布时间】：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 获取状态。

【参考方案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 获取状态。顺便说一句，谢谢你帮助我