중첩 된 객체를 상태에 추가하는 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입니다.

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

때문에 당신은 단지 가치있는 반환해야 상태가 아니라 주 전체의 슬라이스 전자는, 당신은 form 값을 반환해야합니다 즉 : 그 작업을 처리 할 때

case "CHOOSE_FORM": 
    return action.form; 

"login" 또는 "signUp"와 loginForm 상태 키를 대체 할 것이다.

Answer 2

코드의 나머지 부분을 보지 않고

업데이트

mainReducer.js (combinedReducer)는, 내가 추측하고 그것이 될 수 있었던 것처럼이 보이는 말할거야 combinedReducers 파일 내의 문제. 당신이 사용하는 경우 combineReducers은 ... 읽어

그것은 그 안에 당신이 뭔가에 돌아 오는 상태를 설정하는 것이 될 수있다 : 당신의 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