美文网首页
Redux 仓库拆分

Redux 仓库拆分

作者: Poiey | 来源:发表于2019-12-24 21:37 被阅读0次

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

    这里创建的 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
    

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

    相关文章

      网友评论

          本文标题:Redux 仓库拆分

          本文链接:https://www.haomeiwen.com/subject/cytqoctx.html