Redux - 应用程序状态的名称为reducer作为密钥
问题描述:
有人可以帮我解决这个问题吗? 我已经开始学习React和Redux了,但是我在配置redux方面呆了两天。Redux - 应用程序状态的名称为reducer作为密钥
我假设当某些事件触发一个动作时,通过redurs堆栈函数的redux应该返回一个代表我的应用程序状态的对象。 不幸的是,它返回{reducerName =>减速的结果}的对象基本上意味着,如果我有4个减速器,功能store.getState()返回类似
{
'reducerOne': entireApplicationState
'reducerTwo': entireApplicationState
'reducerThree': entireApplicationState
'reducerFour': entireApplicationState
}
我会很感激,如果有人可以帮我,因为我已经完成了所有的想法:)
这是我的application.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')
);
我store.js
import { createStore } from 'redux';
import {rootReducer} from './reducers/container';
export const store = createStore(
rootReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
我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,
}
这是结果:
Object {dataExchange: Object, testReducer: Object}
答
正如已经回答评论combineReducers
确实这样工作。如果你想连锁reducer,以便行动将通过所有的顺序更新状态,你可以使用reduce-reducers。使用这个辅助函数有可能做这样的事情(貌似这是你想要达到什么目的):
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'] });
我可能是错的,但是这是我相信combineReducers()函数究竟是干什么的。按预期工作。 – Gimby
这对我来说很奇怪,因为在我看到的所有教程中,他们只有一个'普通'对象,没有在商店状态中的减速器名称:( 无论如何,感谢您的回答:) – Dario
Blegh,教程。完美的自我破坏工具。请尝试使用redux文档:http://redux.js.org/docs/api/combineReducers.html。 – Gimby