How to return initial state with useReducer?

Question

I'm using useReducer with useContext to manage state, but I can't return initial value of state in a child component.

In my reducer file I have:

import context from './context';

const initialValue = {
  case1token: null,
  case2token: false,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'case1':
      return {
        case1token: action.payload,
      };
    case 'case2':
      return {
        case2token: action.payload,
      };
    default:
      return initialValue;
  }
};

export const {Provider, Context} = context(
  reducer,
  {
    someFunction,
  },
  {initialValue},
);

In my context file I have :

import React, {useReducer} from 'react';

export default (reducer, actions, defaultValue) => {
  const Context = React.createContext();

  const Provider = ({children}) => {
    const [state, dispatch] = useReducer(reducer, defaultValue);

    const boundActions = {};
    for (let key in actions) {
      boundActions[key] = actions[key](dispatch);
    }

    return (
      <Context.Provider value={{state, ...boundActions}}>
        {children}
      </Context.Provider>
    );
  };
  return {Context, Provider};
};

In my App.js file I can successfully return the case1token:

import {
  Provider as AuthProvider,
  Context as AuthContext,
} from './src/Context/auth/authContext';

function App() {
  const {state} = useContext(AuthContext);

  return (
    <NavigationContainer ref={navigationRef}>
      <View style={styles.root}>
        <StatusBar barStyle="light-content" />
        {state.case1token ? <MainFlow /> : <AuthFlow />}
      </View>
    </NavigationContainer>
  );
}

export default () => {
  return (
    <AuthProvider>
      <App />
    </AuthProvider>
  );
};

In this file I'm trying to return the case2token but it's only returning case1token:

import {Context as AuthContext} from '../../Context/auth/authContext/';


const Home = () => {
  const {state} = useContext(AuthContext);

  console.log(state);

  return (
      <SafeAreaView style={styles.screen}>
        <Header/>
          <Text>{state.case2token}</Text>
      </SafeAreaView>
    );
  };

When I log in App.js both tokens get returned.

Why isn't it returning in the child component?

Appreciate any help!

Is `` rendered within the same ``? I can't see it in your code. — Bergi, Sep 28 '22 at 02:10
You have a few problems with your reducer. First, a reducer should return the new state, not just the portion of the state that you are updating. Second, in your default case, you return the `initialState`, so if it is ever reached, it will reset the state to the initial value. I assume you meant to return `state`. I'm not sure if those are your only issues, but I would start there — Max, Sep 28 '22 at 02:28
made the corrections but it still wont return the value, not even when i console log — jdez, Oct 07 '22 at 05:46
@jdez Please [edit] your question to add the current code, ideally in a [mcve] stack snippet. — Bergi, Oct 07 '22 at 13:50

score 0 · Answer 1 · answered Oct 04 '22 at 03:59

0

If value of state.case2token == false Text will not render false as text so u need to do like:

<Text>{state.case2token ? 'true' : 'false'}</Text>

answered Oct 04 '22 at 03:59

Ahmed5G

310
2
8

HI, thanks for replying. I am still not able to return the initial value (false). not even when i console log anywhere – jdez Oct 07 '22 at 05:47

How to return initial state with useReducer?

1 Answers1