0

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.

First time render I'm try log initState enter image description here

And then dispatch enter image description here

0 Answers0