폴더 구조입니다.
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;