Redux reducer 将嵌套对象添加到状态答案

【问题标题】：Redux reducers adding nested objects to stateRedux reducer 将嵌套对象添加到状态
【发布时间】：2017-02-08 00:34:39
【问题描述】：

在使用 React/Redux 为我的应用程序制作 UI 时，我的头撞到了墙上。问题是，当我的操作被客户端变异状态触发时，它会将我正在更改的状态转换为嵌套对象。

在这种情况下，我试图将我的状态 loginForm 更改为 "login" 或 "signUp"。当我启动我的操作时，道具loginForm（从状态传递到我的组件）看起来像这样：this.props.loginForm.loginForm = "login"。

客户端代码：

import React from "react";

    import LoginForm from "../minor/LoginForm";

    const Login = React.createClass({

      displayForm(){

        if (this.props.loginForm === "login"){
          return <span>Login</span>
        } else if (this.props.loginForm === "signUp"){
          return <span>Sign Up</span>
        } else {
          console.log("meh")
        }

      },

      renderLogin(){
        this.props.chooseForm("login");
      },

      renderSignUp(){
        this.props.chooseForm("signUp");
      },

      render(){

        return(

            <div className="loginBox">
              <h1>Slots</h1>
              <button onClick={this.renderLogin}  name="login" >Login</button>
              <button onClick={this.renderSignUp} name="signUp" >Sign Up</button>            
              {this.displayForm()}
            </div>
          )
      }
    });

    export default Login;

userActions.js

export function chooseForm(form){
  console.log("choosing form")

  return {
    type: "CHOOSE_FORM",
    form
   }
}

userReducer.js

export function loginForm(state=null, action){

  switch(action.type){

  case "CHOOSE_FORM":

    return {...state, loginForm: action.form };


  default:
    return state;
  }
}

这里的目的是显示与this.prop.loginForm 的值关联的正确组件，由于上述我的问题，这是无法实现的。

更新

mainReducer.js (combinedReducer)

import {combineReducers} from "redux";
import {routerReducer} from "react-router-redux";

// reducers
import { loginStatus, loginForm }from "./userReducer";

const rootReducer = combineReducers({ loginStatus, loginForm, routing:      routerReducer});

 export default rootReducer;

【问题讨论】：

没有足够的细节 - 但请检查您的组合减速器。我假设你没有使用 react-redux？

标签： javascript reactjs redux state

【解决方案1】：

在没有看到您的其余代码的情况下，我将做出有根据的猜测，并说这看起来可能是组合Reducers 文件中的问题。如果您使用 combineReducers，请继续阅读...

可能是您将 Redux 状态设置为：

loginForm: userReducer
// so the Redux state would be set have a property in it
// 'loginForm' set to {loginForm:'login'}

解决办法：

将您的 combineReducers 修改为：

loginForm: userReducer.loginForm

【讨论】：

感谢有根据的猜测。我更新了我的问题以包括我的等效combineRecuders。如果我对您的理解正确，我需要使用点符号来使这些方法正常工作，而不会使我的状态成为一堆嵌套对象。将测试出来，谢谢。

【解决方案2】：

因为您的loginForm reducer 是slice reducer，您应该只返回该状态片的值，而不是整个状态，即您应该返回form 值：

case "CHOOSE_FORM": 
    return action.form;

在处理这些操作时，这会将loginForm 状态键替换为"login" 或"signUp"。

【讨论】：