Redux -应用程序状态以减速器的名称作为密钥。
Redux -应用程序状态以减速器的名称作为密钥。
提问于 2017-04-03 13:28:27
有人能帮我解决这个问题吗？我已经开始学习，但是在配置redux的几天之后，我就陷入了困境。
我假设当某些东西触发一个操作时，通过还原器堆栈函数的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}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-04-03 17:13:31
正如评论中已经回答的那样，combineReducers确实是这样工作的。如果您想要链式还原器，以便操作通过所有这些操作，那么可以使用减速器对每一个操作中的状态进行顺序更新。使用此帮助函数，可以执行类似的操作(看起来，这就是您想要实现的)：
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'] }); Stack Overflow用户
发布于 2020-03-24 03:47:03
如果有人正在查看，上述评论中提供的链接就会中断。此链接工作，并很好地解释了如何重命名来自您的减速机的状态。如果您不想阅读，请重命名您的还原器import或在您的combineReducer中重命名它。
Example1：
import billReducer as billState from "./reducers";
Example2：
const rootReducer = combineReducer({billState: billReducer});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43185937
复制相关文章
相似问题
腾讯云开发者
