使用Redux在商店中創建初始狀態

我正在使用從https://github.com/caspg/simple-data-table-map的回購實現到我現有的應用程序中。但是，在我現有的應用程序中，它包含各種具有自己特定的initialState的reducer。在回購中，初始化狀態在main.js使用Redux在商店中創建初始狀態

const initialState = { 
    regionData: statesData, 
    emptyRegions: [], 
    sortState: { key: 'regionName', direction: 'ASC' } 
}; 

const store = createStore(rootReducer, initialState);

我分離出的回購減速機（不使用index.js結合，其中3），所以我可以將它們添加到我的現有代碼。

const reducers = { 
    User: require('../reducers/User.js'), 
    Alert: require('../reducers/Alert.js'), 
    Auth: require('../reducers/Auth.js'), 
    Header: require('../reducers/Header.js'), 
    PasswordPolicy: require('../reducers/PasswordPolicy.js'), 
    AuditTrail: require('../reducers/AuditTrail.js'), 
    StoragePolicy: require('../reducers/StoragePolicy.js'), 
    DragAndDrop: require('../reducers/DragAndDrop.js'), 
    UserProfile: require('../reducers/UserProfile.js'), 
    emptyRegions: require('../reducers/map/emptyRegions.js'), //here is it 
    regionData: require('../reducers/map/regionData.js'), //here is it 
    sortState: require('../reducers/map/sortState.js'), //here is it 
    Storage: require('./storage/Storage.js'), 
    router: routerStateReducer 
}; 
module.exports = combineReducers(reducers);

我有一個文件，所有的減速相結合，他們的每一個參數initialstate的（它與特定的減速機相同的文件）

店/ index.js

module.exports = function(initialState) { 
const store = redux.createStore(reducers, initialState, 

    compose(reduxReactRouter({ createHistory }), window.devToolsExtension ? window.devToolsExtension() : f => f) 
) 

if (module.hot) { 
    // Enable Webpack hot module replacement for reducers 
    module.hot.accept('../reducers',() => { 
     const nextReducer = require('../reducers') 
     store.replaceReducer(nextReducer) 
    }) 
} 
return store 
}

我試着將initiateState放入sortState.js中，但它不起作用。數據不顯示。它必須是來自作者回購的東西

const store = createStore(rootReducer, initialState);

將initialState設置爲應用程序狀態。

請賜教。謝謝

來源

2017-07-19 Mervyn Lee

「我有一個文件，所有的減速相結合，他們的每一個參數initialstate的」 - 你能提供你結合初始狀態的代碼？ – cathalkilleen

@cathalkilleen例如，我有一個名爲user.js的一個減速文件， VAR的初始化狀態= { user_credential：{ 用戶名：空，用戶名：空， isVerified：假的，電子郵件：空 } }; module.exports =（狀態=初始化狀態，動作= ''）=> { 開關（action.type）{ 情況下 'GET_USER'： ......所以initiateState被送入module.exports =（state = initialState ...）我在sortState.js中嘗試過，但它不起作用 –

如果您使用的是combineReducers(…)，則每個Reducer需要在第一次運行時返回其初始狀態。

const DEFAULT_STATE = { … } 
const emptyRegionsReducer = (state = DEFAULT_STATE, action) => { 
    switch (action.type) { 
    … 
    default: 
     return state; 
    } 
}

看看line 60在redux回購。對於物體中的每個減速器：

const initialState = reducer(undefined, { type: ActionTypes.INIT })

當調用combineReducers()時立即觸發什麼。

來源

2017-07-19 08:58:59 philipp

在regionData.js中，module.exports =（state = []，action）=> {switch.type（）{ case EDIT_ROW： ...，我如何分配state = initialState，因爲它是一個空數組。 –

但是不應該將'module.exports =（state = statesData，action）'分配給上面預加載的狀態嗎？ – philipp

Thanksssssssssssssssss !!!!我的不好，它終於解決了！ –

有兩種方法可以在Redux中初始化狀態 - docs explain the details very well。

你可以把它當作一個可選第二個參數到createStore功能，這樣設置全球的初始化狀態：

const initialState = { /*..initial state props..*/ }  
const store = createStore(rootReducer, initialState);

或者，您可以設置初始化狀態爲個人減速 （來自官方文檔）：

function counter(state = 0, action) { 
    switch (action.type) { 
     case 'INCREMENT': return state + 1; 
     case 'DECREMENT': return state - 1; 
     default: return state; 
    } 
}

傳遞state = 0表示state在第一次初始化時在該減速器中給出值0。 counter減速機初始化後，state值將變成任何counter在Redux存儲區中。一個重要的事情要注意的是，你必須包括行default: return state;這種方法的工作。

在你的情況，它看起來像你使用兩種方法。如果你很高興與您在減速器內設置初始化狀態，那麼你應該從createStore刪除initialState說法：

const store = createStore(rootReducer);

來源

2017-07-19 09:25:14 cathalkilleen

謝謝。我最終設置個別reducer啓動狀態。 –

使用Redux在商店中創建初始狀態

回答

相關問題