redux-拆分state

一个最小的redux实例

const set_clientUrl="set_clientUrl"
const set_clientReload="set_clientReload"

const initState={
    clientUrl:"http://192.168.40.199:8998/",
    isReload:0,
}
// initState为什么会变？

function reducer(state=initState,action){
    switch(action.type){
        case set_clientUrl:{
            return Object.assign(state,{"clientUrl":action.payload.clientUrl})
        }
        case set_clientReload:{
            // 原数据和新数据的merge操作怎么才是优美的操作呢
            return Object.assign(state,{"isReload":state.isReload+=1})
        }
        default:
            return state
    }
}

function otherReducer(state=initState,action){
    switch(action.type){
        case set_clientUrl:{
            return Object.assign(state,{"clientUrl":action.payload.clientUrl})
        }
        case set_clientReload:{
            // 原数据和新数据的merge操作怎么才是优美的操作呢
            return Object.assign(state,{"isReload":state.isReload+=1})
        }
        default:
            return state
    }
}

合并到成一个新的state

import {combineReducers} from 'redux'
const AllReducer=combineReducers({reducer,otherReducer})
export {AllReducer}

使用

1 .index.js里面
import {createStore}from 'redux'
import {AllReducer} from './redux/reducer'

2 .单独的文件使用
const clientUrl=useSelector(state=>state.reducer.clientUrl)

3 .提交：这里好像有点问题
提交之后上面的reducer要改下
function reducer(state=initState,action){
    console.log(action.payload)
    switch(action.type){
        case set_clientUrl:{
            return Object.assign(state,{"clientUrl":action.payload.value})
//这里要变成是value
        }
        case set_clientReload:{
            // 原数据和新数据的merge操作怎么才是优美的操作呢
            return Object.assign(state,{"isReload":state.isReload+=1})
        }
        default:
            return state
    }
}