入れ子オブジェクトを状態に追加するReduxレデューサー

Question

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; 

Answer 1

ので、あなただけのVALUを返す必要があります

case "CHOOSE_FORM": 
    return action.form; 

それらのアクションを処理するとき"login"か"signUp"とloginForm状態のキーを置き換えます：国家のそのスライス全体ではなく、状態の電子は、あなたがform値を返す必要がありますすなわち。

Answer 2

あなたのコードの残りの部分を見なければ、私は推測を作り、それができるように、これが見えると言うつもりですcombinedReducersファイル内の問題。使用している場合はcombineReducersは...読み

それはその中にあなたのような何かにReduxの状態を設定していることが考えられますし、あなたのcombineReducersを

変更します

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

ソリューション：あなたのloginForm減速がslice reducerある

loginForm: userReducer.loginForm