在React

时间:2016-12-09 16:37:21

标签: reactjs redux

**更新

我已将减速器更新为:

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中看到以下内容,它正在从initialstate记录对象。但是,如果我尝试并在同一组件中记录以下内容:      {的console.log(this.props.selectindibusi.indibiz)} 然后它返回undefined。是不是应该在reducer中设置initialValue?

**更新

我正在使用反应,目前正在尝试学习使用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 reducer中,我有:

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},该值与reducer中的默认值相同,则不会更新。我觉得我在这里缺少一些基本的东西,我会感激任何帮助。

1 个答案:

答案 0 :(得分:3)

根据你的回答,如果状态的控制台日志返回一个空数组,那么:

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是一个空数组。