如何连接redux商店和输入值？

Question

请指教。我想将我的输入值与组件中的商店和值输入连接。 甚至可以做到这一点

我该怎么做，当您进入输入时，现在

 const Search: React.FC = () => {
      const dispatch = useAppDispatch()
      const inputValue = useAppSelector((state) => state.inputSlice.inputValue)
      const changeInputValue = debounce(
        (e: React.ChangeEvent<HTMLInputElement>) => {
          dispatch(inputChangeValue(e.target.value))
        },
        200
      )

  return (
    <div className={styles.search__wrapp}>
      <input
        value={inputValue}
        onChange={(e) => {
          changeInputValue(e)
        }}
        placeholder="Find your favorite character"
        className={styles.search}
      />
      <button className={styles.button__search}>
        <img src={search} alt="search icon" />
      </button>
      <button
        onClick={() => {
          dispatch(removeInputField())
        }}
        className={styles.clearInput}
      >
        <img src={closeIcon} alt="inputClear icon" />
      </button>
    </div>
  )
}

，什么也不会发生（字符串总是空的）我的Redux Toolkit Slice

interface Input {
  inputValue: string
}

const initialState: Input = {
  inputValue: '',
}

export const inputSlice = createSlice({
  name: 'inputValue',
  initialState,
  reducers: {
    inputChangeValue: (state, action: PayloadAction<string>) => {
      state.inputValue = action.payload
    },
    removeInputField: (state) => {
      state.inputValue = ''
    },
  },
})

export const { inputChangeValue, removeInputField } = inputSlice.actions

export const selectCount = (state: RootState) => state.inputSlice.inputValue

Answer 1

请检查是否将InputValue缩小器注册到商店。

import { combineReducers, configureStore } from "@reduxjs/toolkit";
const combinedReducers = combineReducers({
   inputValue: inputSlice.reducer
});

const store = configureStore({
    reducer: (state, action) => combinedReducers(state, action)
});
export default store;

然后在搜索组件中，将inputslice替换为inputValue（因为您在combinereducers中注册为“ InputValue”，），，像这样

const inputValue = useAppSelector((state) => state.inputValue.inputValue)