React +Redux + ReduxTookit 툴킷이 답이다

리엑트로 SUPEMAN_CLIENT를 만들기전
VUEX처럼 스테이트 관리하는 법을 익히기 위해
만들어보는 중이였다
일단
Redux는 VUEX에 비하면 좀 어려웠다
강의를 잘못선택한 점도 있었다
그래서
https://www.youtube.com/watch?v=QZcYz2NrDIs

갓 코딩애플 보고 역시 쉽게 알려주네 하고 이해했다
근데
제일 이해가 안갔던점이
reducer구분을 안하고 action.type같으면 다 수정되 어버린다
그래서 action.type도 매번 안겹치게 만들고 코드 양도 많아진다
예시

export default function reducer2(state=weight,action) {
    if(action.type==='plus'){
        state++;
        return state;
    }else if(action.type==='minus'){
        state--;
        return state;
    }else{
        return state;
    }
}

export default function reducer1(state=weight,action) {
    if(action.type==='plus'){
        state++;
        return state;
    }else if(action.type==='minus'){
        state--;
        return state;
    }else{
        return state;
    }
}

위에 두개의 파일이 있다
dispatch({type:'plus',value:1});
하는 순간 두개다 먹는다 하지만
vuex처럼

 ...mapGetters('basicStore', {
            infoList: 'getInfoList',
            last: 'getLast',
            first: 'getFirst',
            nowPage: 'getNowPage',
            totalPage: 'getTotalPage'
        }),
        ...mapGetters('NavStore', {
            role: 'getRole',
        })

해당 스토어 리액트에서는 리듀스를 겨냥해서 하고싶었다

그래서 찾아본강의
https://www.youtube.com/watch?v=UKnLwVm9suY

진짜 겁나 쉽게 잘 알려주셨다

vuex처럼 개별 리듀스에 접근하는방법이 있었다

import { createSlice } from "@reduxjs/toolkit";

let init={
    weight:0,
}
const reducerSlice=createSlice({
    name:'reducer',
    initialState:init,
    reducers:{
        plus(state,action){
            state.weight=state.weight+action.payload.value;
        },
        minus(state,action){
            state.weight=state.weight-action.payload.value;
        }
    }
})

export default reducerSlice.reducer;
export const reducerAction=reducerSlice.actions;
/**
 * 툴킷이전 방식
 */
// export default function reducer(state=init,action) {
//     console.log('a');
//     if(action.type==='plus'){
//         return state.weight+action.value;
//     }else if(action.type==='minus'){
//         return state.weight-action.value;
//     }else{
//         return state;
//     }
// }

호출

        dispatch(reducerAction.plus({value:1}));
        dispatch(reducer2Action.plus({value:2}));
        dispatch(reducer3Action.plus({value:3}));

이제 좀 vuex처럼 따로따로 움직인다