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

Question

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

以前我在本地管理状态。

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

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

我已经设法处理了我所有的复选框和计数器。但是在尝试处理我的“onChangeText”函数时我仍然收到错误。

我正在尝试将“odo”读数填充为 15，然后允许用户将其更改为正确的数字。目前我的代码returns“未定义完成了这项工作”。

我搜索了论坛、官方文档和 youtube，但找不到任何处理工具包的相关示例 (dispatch/payload)。

感谢您的帮助！

//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>;

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

React Redux toolkit - state management for input field

reactjs

react-native

redux

redux-toolkit