我想創建一個小型聊天應用程式，它有一個留言板、一個文本輸入和一個發送按鈕。我這樣做是為了React/Redux學習。我熟悉React并了解Redux. 但是現在，我遇到了問題并且在我的搜索中沒有找到任何東西。
當我按下發送按鈕時，我想捕獲并發送文本輸入資料。在純 React 中，我通過 將文本輸入系結到狀態useState。現在有了 Redux，我不知道我能做什么。如何將文本輸入值傳遞給特定操作？我需要的很簡單，捕獲文本輸入值。但我找不到任何資源。我不是在尋找表單或提交表單之類的東西，沒有向服務器等提交資料，只是獲取輸入值。我不知道是否可以將任何引數傳遞給 Redux 操作來存盤它們？
我找不到任何教程或資源。任何幫助將不勝感激。
uj5u.com熱心網友回復：
對輸入有反應的 onChange 方法。并且有一個名為 redux thunk 的庫來執行一些額外的操作邏輯并傳遞一些引數。
如果答案不夠，請詳細說明您的問題
uj5u.com熱心網友回復：
當按下提交按鈕時，您可以調度一個接受輸入值的動作。然后，您可以對 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，它提供了更多的靈活性和更好的代碼分段。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/341325.html
標籤：javascript 反应 还原 反应还原 redux-工具包