reactjs - React Redux 工具包 - 输入字段的状态管理

Question

我正在使用 React Native 构建一个应用程序，并开始学习 redux 工具包。

以前我在本地管理我的州。

出于某种原因，我无法理解如何使用 redux 工具包保存文本字段的动态输入。

我能找到的所有示例都包含本地(setState)。

我已经成功处理了所有复选框和计数器..但是在尝试处理“onChangeText”函数时我继续收到错误。

我试图将“odo”读数填充为 15，然后允许用户将其更改为任何正确的数字。目前我的代码返回“未定义的工作”。

我浏览了论坛、官方文档和 youtube，但找不到任何处理工具包(调度/有效负载)的相关示例。

感谢您的帮助!

//SLICE

import {
  createSlice
} from "@reduxjs/toolkit";

export const pickupInputSlice = createSlice({
  name: 'pickupInput',
  initialState: {
    odo: '15',
    waitTime: '11',
    notes: '12',
  },
  reducers: {
    odo: (state, action) => {
      state.odo = action.payload + "did this work";
    },
    waitTime: (state, action) => {
      state.waitTime = action.payload;
    },
    notes: (state, action) => {
      state.notes = action.payload;
    },
  }
});

export const {
  odo,
  waitTime,
  notes
} = pickupInputSlice.actions;

export default pickupInputSlice.reducer;


//SCREEN 

const odoReading = useSelector((state) => state.pickupInput.odo)


  <
  View >
  <
  Text style = {
    styles.checklistText
  } >
  Odometer Reading <
  /Text> <
  TextInput
style = {
  styles.checklistTextInput
}
autoCapitalize = 'none'
autoCorrect = {
  false
}
keyboardType = 'number-pad'
maxLength = {
  6
}
value = {
  odoReading
}
onChangeText = {
  () => dispatch(odo(odo.payload))
}
/> <
/View>

Answer 1

您必须将从 onChangeText 收到的值传递给 odo 函数

<View>
  <Text style={styles.checklistText}>Odometer Reading </Text>
  <TextInput
    style={styles.checklistTextInput}
    autoCapitalize="none"
    autoCorrect={false}
    keyboardType="number-pad"
    maxLength={6}
    value={odoReading}
    onChangeText={value => dispatch(odo(value))} // pass value to reducer function as payload
  />
</View>;