@reduxjs/工具包状态更新问题

7hiiyaii  于 2023-03-02  发布在  其他
关注(0)|答案(2)|浏览(154)

我刚开始学习react-native,我也在做reduxjs/toolkit,我想做一个简单的练习来找出答案,我想做的是当我按下按钮时数字增加1,可惜我没能实现这个增加,我该怎么解决这个问题呢?

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>
  );
};
8oomwypt

8oomwypt1#

有几个问题。
首先,不应该将存储直接导入到任何组件文件中。
第二,你也不应该在组件中调用store.getState(),因为那并不订阅更新,你应该使用useSelector,这是你在另一个组件中使用的。
它 * 看起来 * 像<Second>组件 * 应该 * 重新渲染好。
此外,虽然它与此问题没有直接关系:您*不应该 * 调用legacy_createStore-相反,您 * 应该 * 使用Redux Toolkit中的configureStore方法
更多详情:

moiiocjp

moiiocjp2#

你的回答已经足够了。谢谢。
我在这里包含的代码是为了给那些有同样问题的人提供一个例子。

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>
      );
    };

相关问题