Javascript Redux-应用程序状态将reducer的名称作为键
有人能帮我解决这个问题吗? 我已经开始学习React和Redux,但我在配置Redux方面有好几天的时间 我假设当某个操作触发时,通过函数的reducer堆栈进行redux应该返回一个表示我的应用程序状态的对象。 不幸的是,它返回一个带有{reducerName=>reducer result}的对象,这基本上意味着如果我有4个reducer,函数store.getState()将返回类似Javascript Redux-应用程序状态将reducer的名称作为键,javascript,reactjs,redux,react-redux,reducers,Javascript,Reactjs,Redux,React Redux,Reducers,有人能帮我解决这个问题吗? 我已经开始学习React和Redux,但我在配置Redux方面有好几天的时间 我假设当某个操作触发时,通过函数的reducer堆栈进行redux应该返回一个表示我的应用程序状态的对象。 不幸的是,它返回一个带有{reducerName=>reducer result}的对象,这基本上意味着如果我有4个reducer,函数store.getState()将返回类似 { 'reducerOne': entireApplicationState 'reducerTwo'
{
'reducerOne': entireApplicationState
'reducerTwo': entireApplicationState
'reducerThree': entireApplicationState
'reducerFour': entireApplicationState
}
如果有人能帮我,我会非常感激,因为我已经完成了所有的想法:)
这是我的应用程序.js:
import React from 'react';
import ReactDom from 'react-dom';
import HomePage from 'root_views/home';
import {store} from 'root_services/redux/store';
class Application extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<HomePage/>
)
}
}
var Provider = React.createClass({
childContextTypes: {
store: React.PropTypes.object.isRequired
},
getChildContext: function () {
return {store: this.props.store}
},
render: function () {
return this.props.children;
}
});
ReactDom.render(
<Provider store={store}>
<Application/>
</Provider>,
document.getElementById('application')
);
我的container.js基本上包含我的所有减缩器
import {combineReducers} from 'redux';
// This is just the action label
import {DATA_EXCHANGE_LOAD} from 'root_services/redux/actions/container'
const initialState = {
data_exchange: {},
}
function dataExchange(state = {}, action) {
switch (action.type) {
case DATA_EXCHANGE_LOAD:
return Object.assign({}, state, {
data_exchange:{'reducerOne':'dataExchange'}
});
break;
default:
return initialState;
break;
}
};
function testReducer(state = {}, action) {
switch (action.type) {
case DATA_EXCHANGE_LOAD:
return Object.assign({}, state, {
data_exchange:{'reducerTwo':'testReducer'}
});
break;
default:
return initialState;
break;
}
};
// Export the combined reducers
export const rootReducer = combineReducers({
dataExchange,
testReducer
});
这是触发事件的操作:
export function dataExchangeLoad(){
return {
type: DATA_EXCHANGE_LOAD,
}
};
这是触发操作的我的组件:
import React from 'react'
import "../components/layouts/header/header.less";
import {dataExchangeLoad} from "root_services/redux/actions/container"
export default class HomePage extends React.Component {
constructor(props, {store}) {
super(props);
store.dispatch(dataExchangeLoad());
console.log(store.getState());
}
render() {
return (
<div>
<h1>test</h1>
</div>
)
}
};
HomePage.contextTypes = {
store: React.PropTypes.object,
}
正如已经在注释
中回答的那样,合并转换器确实是这样工作的。如果您想链接减速机,那么操作将遍历所有减速机,依次更新您可以使用的每个减速机中的状态。使用此帮助器函数可以执行类似的操作(看起来这就是您想要实现的):
如果有人在看,上面评论中提供的链接就会断开。这个链接很好地解释了如何重命名来自减速器的状态。如果不想阅读,请重命名减速器import
,或在combineReducer
中重命名减速器
例1:
将billReducer作为billState从“/reducers”导入代码>
例2:
const rootReducer=combineReducer({billState:billReducer})代码>
我可能错了,但我相信combineReducers()函数就是这么做的。按预期工作。我觉得很奇怪,因为在我看过的所有教程中,它们只有一个“公共”对象,在商店状态中没有reducer名称:(无论如何,谢谢你的回答:)Blegh,教程。完美的自我破坏工具。试试redux文档:。好吧,现在我觉得自己像个傻瓜。。。非常感谢您抽出时间!:)是的,请同时查看文档页面,该页面讨论了常见的问题,比如这个问题。
import React from 'react'
import "../components/layouts/header/header.less";
import {dataExchangeLoad} from "root_services/redux/actions/container"
export default class HomePage extends React.Component {
constructor(props, {store}) {
super(props);
store.dispatch(dataExchangeLoad());
console.log(store.getState());
}
render() {
return (
<div>
<h1>test</h1>
</div>
)
}
};
HomePage.contextTypes = {
store: React.PropTypes.object,
}
Object {dataExchange: Object, testReducer: Object}
import reduceReducers from 'reduce-reducers';
const reducer1 = (state = {}, action) => {
if (action.type === 'foo') {
return ({
...state,
touchedBy: ['reducer1'],
})
}
return state;
};
const reducer2 = (state = {}, action) => {
if (action.type === 'foo') {
return ({
...state,
touchedBy: state.touchedBy.concat('reducer2'),
})
}
return state;
};
const reducer = reduceReducers(reducer1, reducer2);
expect(reducer({}, { type: 'foo' }))
.toMatchObject({ touchedBy: ['reducer1', 'reducer2'] });