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

당신은 당신의 최상위 응용 프로그램

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

그나마 모든 compnent에 대해 만든 한 번 REDUX 저장소를 만들어야합니다. 컨테이너 구성 요소를 사용하여 MapStatetoProps 및 mapDispatchToProps를 전달하고 구성 요소에 소품을 전달하십시오.