폴더 구조입니다.

https://cdn.inflearn.com/public/files/posts/5b448d58-6ac8-4c4a-9a18-7205e2aff12b/blob

userStore/userReducer 입니다.

초기 상태와 userReducer 훅에서 사용할 reducer 파일을 작성했습니다.

export const initialState = [
    {
      name: 'hakjun',
      age: 24,
      isActive: false
    },
  ];

export const reducer = (state, action) => {
    switch(action.type){
      case 'CHANGE_USER_STATE':
          return state.map((v) => v.name === action.name ? {...v, isActive: !v.isActive} : v);
      case 'DELETE_USER':
          return state.filter((v) => v.name !== action.name);
      case 'CREATE_USER':
          return  state.concat({name: action.name, age: 55, isActive: false});
    }
}

userStore/index 입니다

React.createContext 으로 UserContext 를 만들었습니다.

userReducer 의 반환값인 상태와, dispatch 를 UserContext.Provider 에 value 값으로 넘겨주었습니다.

import React, {useReducer } from "react";
import { initialState, reducer } from "./userReduer";

const UserContext = React.createContext(null)

const UserProvider = ({children}) => {
    const [users, dispatch] = **useReducer**(reducer, initialState);

    return (
        **<UserContext.Provider value={{dispatch, users}}>**
            {children}
        **</UserContext.Provider>**
    )
}

export {UserContext};
export default UserProvider;

store/index 입니다

Context의 Provider를 관리해야 할 상태별로 생성하여 Global Provider 로 묶어주었습니다.

import React from 'react';
import UserProvider from './userStore';
import PostProvider from './postStore';

const GlobalProvider = ({children}) => {
    return (
        <UserProvider>
            <PostProvider>
                {children}
            </PostProvider>
        </UserProvider>
    ); 
};

export default GlobalProvider;