반응형

설치

yarn add redux react-redux @reduxjs/toolkit

예제 코드

  • counterReducer.js

    export const COUNTER_ACTION_TYPE = {
    ADD_COUNT: 'counter/ADD_COUNT',
};

const initialState = {
    count: 0,
};

const counterReducer = (state = initialState, action) => {
    switch (action.type) {
        case COUNTER_ACTION_TYPE.ADD_COUNT:
            // 변경된 count 값을 갖는 새 state로 만들어 반환하여 state 반영
            return { ...state, count: state.count + action.payload };
        default:
            return state;
    }
};

export default counterReducer;

  • counterStore.js

    import { combineReducers, createStore } from 'redux';
import counterReducer from './counterReducer';

const createCounterStore = () => {
    const store = createStore(
        combineReducers({
            counterReducer,
        }),
    );

    return store;
};

export default createCounterStore;

  • index.js

    import React from 'react';
import { Provider, useDispatch, useSelector } from 'react-redux';
import createCounterStore from './counterStore';
import { COUNTER_ACTION_TYPE } from './counterReducer';

const store = createCounterStore();

const CountDisplay = () => {
    // counterReducer는 counterStore.js에서 combineReducers에 파라미터로 넘겨준 필드명
    const count = useSelector(({ counterReducer }) => counterReducer.count);

    return <div>{count}</div>;
};

const CountController = () => {
    const dispatch = useDispatch();

    return (
        <div>
            <button onClick={() => dispatch({ type: COUNTER_ACTION_TYPE.ADD_COUNT, payload: -1 })}>
                -
            </button>
            <button onClick={() => dispatch({ type: COUNTER_ACTION_TYPE.ADD_COUNT, payload: +1 })}>
                +
            </button>
        </div>
    );
};

const Container = () => {
    return (
        <div>
            <CountDisplay />
            <CountController />
        </div>
    );
};

const App = () => {
    return (
        <Provider store={store}>
            <Container />
        </Provider>
    );
};

export default App;

예제 코드 - with slice

  • counterSlice.js

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

const initialState = {
    count: 0,
};

const counterSlice = createSlice({
    name: 'counter',
    initialState,
    reducers: {
        addCount: (state, action) => {
            // state의 count 값을 변경하여 state 반영
            state.count = state.count + action.payload;
        },
    },
});

export default counterSlice;

  • counterStore.js

    import { combineReducers, createStore } from 'redux';
import counterSlice from './counterSlice';

const createCounterStore = () => {
    const store = createStore(
        combineReducers({
            counterReducer: counterSlice.reducer,
        }),
    );

    return store;
};

export default createCounterStore;

  • index.js

    import React from 'react';
import { Provider, useDispatch, useSelector } from 'react-redux';
import createCounterStore from './counterStore';
import counterSlice from './counterSlice';

const store = createCounterStore();

const CountDisplay = () => {
    // counterReducer는 counterStore.js에서 combineReducers에 파라미터로 넘겨준 필드명
    const count = useSelector(({ counterReducer }) => counterReducer.count);

    return <div>{count}</div>;
};

const CountController = () => {
    const dispatch = useDispatch();

    return (
        <div>
            <button onClick={() => dispatch(counterSlice.actions.addCount(-1))}>-</button>
            <button onClick={() => dispatch(counterSlice.actions.addCount(+1))}>+</button>
        </div>
    );
};

const Container = () => {
    return (
        <div>
            <CountDisplay />
            <CountController />
        </div>
    );
};

const App = () => {
    return (
        <Provider store={store}>
            <Container />
        </Provider>
    );
};

export default App;

참고

반응형

'Development > React' 카테고리의 다른 글

[React] WebSocket  (1) 2020.12.30
[React] redux-saga  (0) 2020.12.30
[React] Library  (0) 2020.12.30
[React] react-testing-library  (0) 2019.12.29
[React] Enzyme  (0) 2019.12.28

+ Recent posts

티스토리툴바