Question 32965 in React native Question posted in
The official React Native documentation can be found here.

@reduxjs/toolkit State Update Issue – React native

I just started learning react-native.
I’m also working on reduxjs/toolkit. I wanted to do a simple exercise to find out.
What I want to do is increase the number by 1 when I press the button. Unfortunately, I was not able to achieve this increase. How can i solve this problem.


import React from "react";
import { View, Text, Button } from "react-native";
import { Provider, useDispatch, useSelector } from "react-redux";
import {
  legacy_createStore,
  createSlice,
  createAction,
  combineReducers
} from "@reduxjs/toolkit";

const incrementBy = createAction('incrementBy')

const counter = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    multiply: {
      reducer: (state, action) => state * action.payload,
      prepare: (value) => ({ payload: value || 2 })
    },
  },
  extraReducers: (builder) => {
    builder.addCase(incrementBy, (state, action) => {
      return state + action.payload;
    })
  },
})

const reducer = combineReducers({
  counter: counter.reducer,
})

const store = legacy_createStore(reducer)

export default () => {
  return (
    <Provider store={store}>
      <View style={{ flex: 1 }}>
        <First />
        <Second />
      </View>
    </Provider>
  );
};

const First = () => {
  const counter = store.getState().counter;
  return (
    <View style={{ flex: 1, backgroundColor: "black" }}>
      <Text style={{ color: "white", fontSize: 40 }}>First : {counter}</Text>
    </View>
  );
};

const Second = () => {

  const counter = useSelector(state => state.counter);
  const dispatch = useDispatch();

  return (`your text`
    <View style={{ flex: 1 }}>
      <Text style={{ fontSize: 40 }}>Second : {counter}</Text>
      <Button title="+" onPress={() => dispatch(increment())} />
    </View>
  );
};
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Your answer was enough for me. Thanks.

    I am including the code here as an example for those who have the same problem.

     import React from "react";
    import { View, Text, Button } from "react-native";
    import { Provider, useDispatch, useSelector } from "react-redux";
    import { configureStore, createSlice } from "@reduxjs/toolkit";
    
    export const counterSlice = createSlice({
      name: 'counter',
      initialState: { value: 2 },
      reducers: {
        increment: (state,) => { state.value += 1 },
        incrementByAmount: (state, action) => {
          state.value += action.payload;
        },
      },
    })
    
    const store = configureStore({
      reducer: {
        counter: counterSlice.reducer,
      }
    })
    
    const { increment, incrementByAmount } = counterSlice.actions
    
    export default () => {
      return (
        <Provider store={store}>
          <View style={{ flex: 1 }}>
            <First />
            <Second />
          </View>
        </Provider>
      );
    };
    
    const First = () => {
      const counter = useSelector((state) => state.counter.value);
      return (
        <View style={{ flex: 1, backgroundColor: "black" }}>
          <Text style={{ color: "white", fontSize: 40 }}>First : {counter}</Text>
        </View>
      );
    };
    
    const Second = () => {
    
      const counter = useSelector((state) => state.counter.value);
      const dispatch = useDispatch();
    
      return (
        <View style={{ flex: 1 }}>
          <Text style={{ fontSize: 40 }}>Second : {counter}</Text>
          <Button title = {"+"}onPress={() => dispatch(increment())} />   
        </View>
      );
    };

  2. 0

    There’s a couple issues here.

    First, you shouldn’t be importing the store directly into any component files.

    Second, you also shouldn’t be calling store.getState() in a component, because that doesn’t subscribe to updates. You should be using useSelector, which is what you have in the other component.

    It looks like the <Second> component ought to re-render okay.

    Also, while it’s not directly related to this issue: you should not be calling legacy_createStore – instead, you should be using the configureStore method from Redux Toolkit instead.

    More details:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search