Reactjs + redux: Редукторы общего доступа для разных компонентов

Question

Я в основном пытаюсь создать реакцию webapp с большим количеством страниц. И данные для каждой страницы загружаются через различные вызовы API. И большинство ответов имеют информацию, зависящую друг от друга. Я решил использовать redux для хранения этих ответов и доступа от каждого компонента.

Это то, что мой файл Редуктор выглядеть,

var initialState = { 
     "userDetails": [], 
     "userPicks": [] 
    }; 

module.exports = function(state, action, data) { 
    state = state || initialState; 
    switch (action.type) { 
    case 'ADD_USER_LIST': 
     return Object.assign({}, state, { 
     "userDetails": action.data 
     }) 

    case 'ADD_USER_PICK_LIST': 
     return Object.assign({}, state, { 
     "userPicks": action.data 
     }) 

    case 'UPDATE_SELECTION': 
     return Object.assign({}, state, { 
     return "do something" 
     }); 

    default: 
     return state 
    } 
} 

Поэтому я использую

var redux = require('redux'); var reducers = require('./reducers'); var store = redux.createStore(reducers);

на верхней части каждого компонента, который использует информацию из магазина.

store.getState() 

но этот процесс всегда сбрасывает мое состояние редуктора на начальное, и приложение теряет все данные. Может ли кто-нибудь указать, где я ошибаюсь и на что я должен смотреть?

Answer 1

«Кто-нибудь может указать, где я ошибаюсь», вы создаете новый магазин для каждого типа компонента. Вам нужно сделать его отдельным модулем и создать хранилище один раз для каждого приложения.

// redux/store js 
var redux = require('redux'); 
var reducers = require('./reducers'); 
module.exports = redux.createStore(reducers); 

«Что я должен искать», вы должны взглянуть на официальную ссылку на связывание для redux. React Redux.

// app.js 
var store = require('./redux/store.js'); 
var Provider = require('react-redux').Provider 

ReactDOM.render(
(<Provider store={store}> 
    <App /> 
    </Provider 
), mountingPoint) 

Answer 2

Вы должны создать Redux магазин раз в приложение верхнего уровня

var redux = require('redux'); 
var reducers = require('./reducers'); 
var store = redux.createStore(reducers); 

Dont создать для каждого Compnent. Используйте компоненты контейнера для mapStatetoProps и mapDispatchToProps и передайте опоры на компоненты