I'm learning ReactJs. I'm creating state management by useReducer and useContext through some instructions. I have a problem when combining reducer and state. When I dispatch data, I can't get the initial state in the reducer. Below is my code for this one. Can you help me find the error in my logic. Thank you.
userReducer
const initialStateUser = {
users: [],
};
function userReducer(state, action) {
switch (action.type) {
case REGISTER:
console.log(state); //can not log state here when after dispatch
return state;
default:
console.log(state);
return state;
}
}
export default userReducer;
export { initialStateUser };
productReducer
const initialStateProduct = {
product: [],
};
function productReducer(state, action) {
switch (action.type) {
default:
console.log(state);
return state;
}
}
export default productReducer;
export { initialStateProduct };
Combine Reducer
import { initialStateProduct } from './productReducer';
import { initialStateUser } from './userReducer';
const combineReducers = (slides) => (state, action) => //can still get the state data here
Object.keys(slides).reduce(
(acc, prop) => ({
...acc,
[prop]: slides[prop](acc[prop], action),
}),
state,
);
const InitState = {
initialStateProduct,
initialStateUser,
};
export default combineReducers;
export { InitState };
Action
export const actRegister = (payload) => {
console.log(payload);
return {
type: ActionType.REGISTER,
payload,
};
};
Context
import { createContext } from 'react';
const Context = createContext();
export default Context;
Provider
import { useReducer, useMemo } from "react";
import Context from "~/store/Context";
import {InitState} from "~/reducers/combineReducers";
import combineReducers from "~/reducers/combineReducers";
import productReducer from "~/reducers/productReducer";
import userReducer from "~/reducers/userReducer"
const rootReducer = combineReducers({
productReducer,
userReducer,
});
function Provider({ children}){
const [state, dispatch] = useReducer(rootReducer, InitState);
const store=useMemo(() => [state, dispatch], [state]);
return (
<Context.Provider value={store}>
{children}
</Context.Provider>
);
}
export default Provider;
useStore This one is a custom hook for easy use state and dispatch
import { useContext } from 'react';
import Context from '~/store/Context';
export const useStore = () => {
const [state, dispatch] = useContext(Context);
return [state, dispatch];
};
Index.js
root.render(
<React.StrictMode>
<GlobalStyle>
<StoreProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</StoreProvider>
</GlobalStyle>
</React.StrictMode>,
);
Using
const [state, dispatch] = useStore();
console.log(state);
const onSubmit = (data) => {
dispatch(actions.actRegister(data))
};
I don't know when I dispatch one user data from the form register, I still can get data in the combine reducer function but when the data to userReducer function I can't catch it.