在 React 应用程序中使用 Redux 获取文本输入值

Question

我想创建一个小的聊天应用程序，它有一个留言板、一个文本输入和一个发送按钮。我这样做是为了 React/Redux 学习。我熟悉React，得到了Redux的概念。但是现在，我遇到了问题，在我的搜索中没有找到任何东西。

我想在按下发送按钮时捕获并发送文本输入数据。在纯粹的反应中，我通过 useState 将文本输入绑定到一个状态。现在用 Redux，我不知道我能做什么。如何将文本输入值传递给特定操作？我需要的很简单，捕捉文本输入值。但是我找不到任何资源。我不是在寻找表单或提交表单之类的东西，也没有向服务器提交数据等，只是获取输入值。我不知道是否可以将任何参数传递给 Redux 操作来存储它们？

我找不到任何教程或资源。任何帮助将不胜感激。

Answer 1

输入的反应中有 onChange 方法。并且有一个名为 redux thunk 的库可以对操作执行一些额外的逻辑并传递一些参数。

如果答案不充分，请详细说明您的问题

Answer 2

您可以调度一个动作，在按下提交按钮时接受输入值。然后，您可以在 redux reducer 中对捕获的值执行所需的操作。
从您的组件调度一个动作。

import React, {useRef} from 'react'
import {useDispatch} from 'react-redux'

export default function App(){
   const textVal = useRef()
   const dispatch = useDispatch()
   function sendTextValueHandler(){
       const inputVal = textVal.current.value
       dispatch({type:'INP_VAL', message: inputVal}) //Pass input value to redux store
   } 
   return(
       <input type='text' ref={textVal}/>
       <button onClick={sendTextValueHandler}>Send</button>
   )
}

在你的 redux 商店中，

const reducer = (state={message:''},action)=>{
   if(action.type === 'INP_VAL'){
     const inputValue = action.message //Capture the input value and do the required operation.
    return {...state,message:inputValue}
   }
   .
   .
   .
   return state
}

const store = useStore(reducer)
export default store

以上片段是如何完成此任务的基本结构示例。一旦掌握了它的要点，您就可以进一步迁移到使用 redux-toolkit，它提供了更大的灵活性和更好的代码分段。

Answer 3

在添加 redux 之前，一个带有内部状态的简单解决方案如下所示：

import React, {useState} from 'react'

const Sample = () => {
  const [inputValue, setInputValue] = useState("");
  
  const handleChange = (e) => {
     setInputValue(e.target.value)
  }

  return(
    <input type='text' value={inputValue} onChange={handleChange} />
  )
}

现在，尝试使用 redux 实现：

import React from 'react';
import {useDispatch, useSelector} from 'react-redux';

const Sample = () => {
  const dispatch = useDispatch();
  const inputValue = useSelector(state => state.sample.value)
  
  const handleChange = (e) => {
    dispatch({type: 'CHANGE_INPUT_VALUE`, payload: e.target.value})
  }

  return(
    <input type='text' value={inputValue} onChange={handleChange}>
  )
}

reducer 可能看起来像这样：

const initialState = {
  value: "";
}

const sampleReducer = (state=initialState, action) => {
  switch(action.type){
    case 'CHANGE_INPUT_VALUE':
      return{
        ...state,
        value: action.payload
      }
    // other cases ...
    default: 
     return state
  }
}

我宁愿在单独的文件中定义操作和选择器，并将它们导入到需要的地方：

示例操作文件：

export const CHAGNE_INPUT_VALUE = 'CHANGE_INPUT_VALUE';

export const changeInputValue = (value) => ({type: CHAGNE_INPUT_VALUE, payload: value})

示例选择器文件：

export const selectInputValue = (state) => state.sample.value

现在将它们应用于示例组件：

import React from 'react';
import {useDispatch, useSelector} from 'react-redux';

import {changeInputValue} from 'path/to/action/file';
import {selectInputValue} from 'path/to/selector/file';

const Sample = () => {
  const dispatch = useDispatch();
  const inputValue = useSelector(selectInputValue)

  const handleChange = (e) => {
    dispatch(changeInputValue(e.target.value))
  }

  return(
    <input type='text' value={inputValue} onChange={handleChange}>
  )
}

现在，回到问题：是的，您可以将任何内容作为有效载荷添加到减速器中，例如：

dispatch(updateUserProfile({name: "", age: 0, image: "", children: [], ...}))

case UPDATE_PROFILE:
   return {
     ...state,
     name: action.payload.name,
     age: action.payload.age,
   }

在 React 应用程序中使用 Redux 获取文本输入值

Getting Text Input value with Redux in a React App

javascript

reactjs

redux

react-redux

redux-toolkit