[英]Redux reducers adding nested objects to state
Banging my head against a wall here while making the UI for my app using React/Redux. 使用React / Redux为我的应用制作UI时,我的头靠在墙上。 The problem is that when my action is fired-off by the client mutating state it turns the piece of state I'm changing into a nested object. 问题是,当我的操作被客户端更改状态触发时,它会将我要更改的状态变为嵌套对象。
In this case I am trying to change the piece of my state loginForm
to either be "login"
or "signUp"
. 在这种情况下,我试图将状态loginForm
的部分更改为"login"
或"signUp"
。 When I fire off my action the prop loginForm
(passed down into my component from state) looks like this: this.props.loginForm.loginForm = "login"
. 当我启动动作时,道具loginForm
(从状态传递到我的组件中)如下所示: this.props.loginForm.loginForm = "login"
。
client-side code: 客户端代码:
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 userActions.js
export function chooseForm(form){
console.log("choosing form")
return {
type: "CHOOSE_FORM",
form
}
}
userReducer.js userReducer.js
export function loginForm(state=null, action){
switch(action.type){
case "CHOOSE_FORM":
return {...state, loginForm: action.form };
default:
return state;
}
}
The aim here is to then display the proper component associated with the value of this.prop.loginForm
which is unachievable due to my issue stated above. 然后,这里的目的是显示与this.prop.loginForm
的值相关联的适当组件,由于我上述问题,这是无法实现的。
Update 更新
mainReducer.js (combinedReducer) 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;
Without seeing the rest of your code, I'm going to make an educated guess and say this looks like it could be a problem within a combinedReducers file. 在没有看到您的其余代码的情况下,我将作一个有根据的猜测,并说这似乎是CombinedReducers文件中的一个问题。 If you are using combineReducers read on... 如果您正在使用CombineReducers,请继续阅读...
It could be that within that you are setting the Redux state to something like: 可能是您将Redux状态设置为类似以下内容:
loginForm: userReducer
// so the Redux state would be set have a property in it
// 'loginForm' set to {loginForm:'login'}
The solution: 解决方案:
Modify your combineReducers to: 将您的CombineReducers修改为:
loginForm: userReducer.loginForm
Because your loginForm
reducer is a slice reducer you should just return the value for that slice of state, not the entire state, ie you should return the form
value: 因为您的loginForm
reducer是slice loginForm
器,所以您应该只返回该状态片的值,而不是整个状态,即应返回form
值:
case "CHOOSE_FORM":
return action.form;
Which would replace the loginForm
state key with "login"
or "signUp"
when handling those actions. 在处理这些操作时, "signUp"
用"login"
或"signUp"
替换loginForm
状态键。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.