在 React 中使用 redux 状态时遇到麻烦

Question

**更新

我已将减速器更新为：

const initialState = {
step: 1,
indibiz: "individual",
firstName:"first",
lastName: "last",
email: "email",
choice: "null",
emailNews: "no",
dob: "1",
mobileNumber: "1234567890",
island: "St. Lucia",
industry: "Astronaut",
Skill: "Space Monkey",
createClick: false
}
export default function (state = initialState, action) {
switch (action.type) {
case "SELECT_BUSINESS":
  console.log(state);
  return { ...state, indibiz: action.payloadEvent }
  break;

}
 return state;
}

现在我在 console.log 中看到以下内容，它正在从初始状态记录对象。但是，如果我尝试并在同一组件中记录以下内容： {console.log(this.props.selectindibusi.indibiz)} 然后它返回未定义。不是应该有在reducer中设置的initialValue吗？

**更新结束

我正在使用 react，目前正在尝试学习使用 Redux 并在我正在做的项目中使用它。问题是我觉得我不完全了解减速器。以下是我的减速器索引：

import {combineReducers} from 'redux';
import signupState from './reducer-signup.js';
import TestReducer from './testalertreducer.js';
import Selectindibusi from './reducer-select_indy_biz.js';

const allReducers = combineReducers({
  signupState: signupState,
  selectindibusi: Selectindibusi,
});

在我的 signupState 减速器中，我有：

export default function () {
  return ({
    step: 1,
    indibiz: "individual",
    firstName:"first",
    lastName: "last",
    email: "email",
    choice: "null",
    emailNews: "no",
    dob: "1",
    mobileNumber: "1234567890",
    island: "St. Lucia",
    industry: "Astronaut",
    Skill: "Space Monkey",
    createClick: false
  });
}

下面是动作：

export function selectindibusi(signupState, event) {
  const SELECT_BUSINESS = "random string";
  console.log(signupState);

  return {
    type: "SELECT_BUSINESS",
    payloadState: signupState,
    payloadEvent: event.target.value
  };
}

下面是监听那个动作的reducer：

export default function (state = [], action) {
  switch (action.type) {
    case "SELECT_BUSINESS":
    console.log(state);

    return { ...state, indibiz: action.payloadEvent }
    break;    
  }

  return state;
}

我在下拉菜单上的 onChange 操作中调用此操作，如下所示：

             <select className="formSelector100"  onChange={this.props.selectindibusi.bind(this,this.props.signupState)}>
                <option value="individual">Individual</option>
                <option value="business">Business</option>
              </select></label>

在操作中，我可以控制台记录正在传递的数据。问题是它没有更新 signupState reducer 中的数据，也没有创建我可以访问的新对象。

如果我尝试显示 {this.props.signupState.indibiz} 在我的组件上，该值与减速器中的默认值相同，它不会更新。我觉得我在这里遗漏了一些基本的东西，我将不胜感激。

Answer 1

根据您的回复，如果状态的控制台日志返回一个空数组，则：

export default function () {
  return ({
    step: 1,
    indibiz: "individual",
    firstName:"first",
    lastName: "last",
    email: "email",
    choice: "null",
    emailNews: "no",
    dob: "1",
    mobileNumber: "1234567890",
    island: "St. Lucia",
    industry: "Astronaut",
    Skill: "Space Monkey",
    createClick: false
  });
}

没有被设置为状态。你应该怎么做是

const initialState = {
    step: 1,
    indibiz: "individual",
    firstName:"first",
    lastName: "last",
    email: "email",
    choice: "null",
    emailNews: "no",
    dob: "1",
    mobileNumber: "1234567890",
    island: "St. Lucia",
    industry: "Astronaut",
    Skill: "Space Monkey",
    createClick: false
  }

然后在你的 signupState reducer 中

export default function (state = initialState, action) {
  switch (action.type) {
    case "SELECT_BUSINESS":
       console.log(state);
       return { ...state, indibiz: action.payloadEvent }
    break;    
  }

  return state;
}

到目前为止，你如何设置你的 reducer 没有收到正确的初始状态，因此它认为 state 是一个空数组。