Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/400.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Redux-应用程序状态将reducer的名称作为键_Javascript_Reactjs_Redux_React Redux_Reducers - Fatal编程技术网

Javascript Redux-应用程序状态将reducer的名称作为键

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'

有人能帮我解决这个问题吗? 我已经开始学习React和Redux,但我在配置Redux方面有好几天的时间

我假设当某个操作触发时,通过函数的reducer堆栈进行redux应该返回一个表示我的应用程序状态的对象。 不幸的是,它返回一个带有{reducerName=>reducer result}的对象,这基本上意味着如果我有4个reducer,函数store.getState()将返回类似

{
 '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'] });