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}

来源

2017-04-03 Dario

我可能是错的，但是这是我相信combineReducers（）函数究竟是干什么的。按预期工作。 – Gimby

这对我来说很奇怪，因为在我看到的所有教程中，他们只有一个'普通'对象，没有在商店状态中的减速器名称:( 无论如何，感谢您的回答:) – Dario

Blegh，教程。完美的自我破坏工具。请尝试使用redux文档：http://redux.js.org/docs/api/combineReducers.html。 – Gimby

正如已经回答评论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'] });

来源

2017-04-03 17:13:31 fkulikov

Redux - 应用程序状态的名称为reducer作为密钥

回答

相关问题