![](/img/trans.png)
[英]State in redux/react app has a property with the name of the reducer
[英]Redux - application state has the name of reducer as key
有人可以幫我解決這個問題嗎? 我已經開始學習 React 和 Redux,但是我在配置 redux 上被困了幾天。
我假設當某事觸發一個動作時,通過 reducers 函數堆棧的 redux 應該返回一個代表我的應用程序狀態的對象。 不幸的是,它返回一個帶有 { reducerName => reducer result } 的對象基本上意味着如果我有 4 個 reducer,函數 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
確實是這樣工作的。 如果您想鏈接減速器,以便操作將依次遍歷所有減速器,則可以使用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'] });
如果有人在看,上面在評論中提供的鏈接已損壞。 此鏈接有效並很好地解釋了如何重命名來自減速器的狀態。 如果您不想閱讀,請重命名您的 reducer import
或在您的combineReducer
重命名它。
示例 1:
import billReducer as billState from "./reducers";
示例2:
const rootReducer = combineReducer({billState: billReducer});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.