Redux 仓库拆分

2019-12-24  本文已影响0人  Poiey

构建一个项目时,一个仓库组件往往放不了那么多数据,并且后期很难管理,不易维护,仓库拆分可以将仓库数据以模块化的形式存储。

这里创建的 store/index.js 仅仅是引入其他组件的仓库数据

//store / index.js
import { createStore } from 'redux'
import reducer from './todu'

const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
export default store
// todu / index.js
const initState = {
    inputvalue:'',
    todus : [
        '吃饭',
        '睡觉'
    ]
}
const reducer = (state = initState , action)=>{
    if(action.type === 'CHANGE_CON'){
        return state={
            ...state,
            inputvalue: action.value
        }
    }else if(action.type==='DELETE_LI'){
        let newState = JSON.parse(JSON.stringify(state))
        newState.todus.splice(action.index,1)
        return state={
            ...state,
            todus:newState.todus
        }
    }else if(action.type==='ADD_LIST'){
        let newState = JSON.parse(JSON.stringify(state))
        newState.todus.push(state.inputvalue)
        return state={
            ...state,
            todus:newState.todus
        }
    }
    return state
}
export default reducer

这里只分出一个仓库数据,还可以继续拆分。

上一篇 下一篇

猜你喜欢

热点阅读