react-native - React Native / Redux Toolkit 状态渲染总是落后一步

Question

我在使用 React Native 构建的应用程序中遇到了一些状态管理问题，所以我决定尝试 Redux-Toolkit。在 YouTube 上观看了一些教程后，我能够实现我需要的功能。不幸的是，似乎当我使用调度为变量设置新状态时，状态总是落后一步/状态。例如，根据我的代码，变量“term”的初始值为“spring”。共有三个按钮（春季、夏季和秋季）。如果我点击“summer”，一个警报会显示“spring”，这是初始值，如果我随后点击三个按钮中的任何一个，就会显示“summer”（这是之前的状态）。显示的状态始终是之前的状态。我的代码逻辑有问题吗？基本上，这三个按钮将用于根据学期/学期更改 SQLite 查询过滤器。请在下面查看我在代码中遇到的问题的重新创建。谢谢你

TermSlice.js

    import { createSlice } from "@reduxjs/toolkit";
    
    export const termSlice = createSlice({
      name: "termChanger",
      initialState: {
        term: 'Spring'
      },
      reducers: {
        setTerm: (state, action) => {
          state.term = action.payload;
        }
      }
    });
    
    export const { setTerm } = termSlice.actions;
    export default termSlice.reducer;

Store.js

    import { configureStore } from "@reduxjs/toolkit";
    import termSlice from "./TermSlice";
    
    export default configureStore({
      reducer: {
        termChanger : termSlice
      },
    });

主页.js

import React from "react";
import { StyleSheet, View, Button, Text} from "react-native";
import { StatusBar } from "expo-status-bar";

import {useSelector, useDispatch } from "react-redux"
import { setTerm } from "../redux/TermSlice";

export default function Home() {
  const dispatch = useDispatch();
  const { term } = useSelector((state) => state.termChanger);

  return (
      <View style={styles.container}>

        <Button onPress={() => {
          alert(term);
        }} title="Term">Term</Button>

        <Button onPress={() => {
          dispatch(setTerm("Spring"));
          alert(term);
        }} title="Spring">Spring</Button>

        <Button onPress={() => {
          dispatch(setTerm("Summer"));
          alert(term);
        }} title="Summer">Summer</Button>

        <Button onPress={() => {
          dispatch(setTerm("Fall"));
          alert(term);
        }} title="Fall">Fall</Button>

        <StatusBar style="auto" />
      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

应用程序.js

import React from "react";
import { Provider } from "react-redux"
import store from "./src/redux/Store";
import Home from "./src/screens/Home";

export default function App() {

  return (
    <Provider store={store}>
      <Home />
    </Provider>
  );
}

标签： react-nativereduxreact-reduxredux-toolkit

Answer 1

dispatch(setTerm("Spring"))动作和alert(term)函数都在同一个渲染周期中调用，所以alert(term)在.termdispatch

你的useSelector钩子正在更新。您可以alert通过使用useEffect响应值变化的钩子来使用新值term。

或者只是坚持你的“期限”按钮。此按钮将获得正确的值，因为它也不会更改term它正在显示的值。

export default function Home() {
  const dispatch = useDispatch();
  const term = useSelector((state) => state.termChanger.term);

  useEffect(() => {
    alert(term);
  }, [term]);

  return (
    <View style={styles.container}>
      <Button onPress={() => alert(term)} title="Term">
        Term
      </Button>

      <Button onPress={() => dispatch(setTerm("Spring"))} title="Spring">
        Spring
      </Button>

      <Button onPress={() => dispatch(setTerm("Summer"))} title="Summer">
        Summer
      </Button>

      <Button onPress={() => dispatch(setTerm("Fall"))} title="Fall">
        Fall
      </Button>

      <StatusBar style="auto" />
    </View>
  );
}