使用輸入更改 Redux 存儲

Question

我對 React、Typescript 和 Redux真的很陌生，< 使用它們一周。

我需要的是在 Redux 的存儲中存儲一個“用戶名”，以便根據存儲中的其他值對其進行驗證。 我的問題特別是無法存儲用戶名，主要是因為所有示例都使用基於類的組件，而我使用的是功能組件。 這是我目前所擁有的：

 //User input component import React, { useState } from "react"; import { connect } from "react-redux"; import { bindActionCreators } from "redux"; import * as actions from "../../actions"; import Button from "@material-ui/core/Button"; import TextField from "@material-ui/core/TextField"; import Dialog from "@material-ui/core/Dialog"; import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogContentText from "@material-ui/core/DialogContentText"; import DialogTitle from "@material-ui/core/DialogTitle"; import { ApplicationStateInterface } from "../../combineReducers"; import { Box } from "@material-ui/core"; interface channelCreatorInterface { open: boolean; hideChannelCreator?: any; handleFormChange?: any; } const mapStateToProps = ( state: ApplicationStateInterface, ownProps: channelCreatorInterface ) => { return { ...ownProps, }; }; const mapDispatchToProps = (dispatch: any) => ({ hideChannelCreator() { dispatch(actions.hideChannelCreator()); }, }); const ChannelCreator = (props: channelCreatorInterface) => { return ( <div> <Dialog open={props.open} onClose={props.hideChannelCreator} aria-labelledby='form-dialog-title'> <DialogTitle id='form-dialog-title'>Create channel name</DialogTitle> <DialogContent> <DialogContentText> To create a channel name, please enter your desired name here. We will check for availability. </DialogContentText> <TextField autoFocus margin='dense' id='name' label='Channel name' type='username' fullWidth onChange= {HERE IS THE EVENT I NEED TO CAPTURE} /> </DialogContent> <DialogActions> <Button color='primary' onClick={props.hideChannelCreator}> Cancel </Button> <Box id='saveButton'> <Button variant='contained' color='primary'> Save </Button> </Box> </DialogActions> </Dialog> </div> ); }; export default connect(mapStateToProps, mapDispatchToProps)(ChannelCreator);

---

 //Form change action import { makeActionCreator } from "../utility"; export const HANDLE_FORM_CHANGE = "HANDLE_FORM_CHANGE"; export const handleFormChange = makeActionCreator( HANDLE_FORM_CHANGE, "payload" );

---

 //Reducer import { constants } from "os"; import { Reducer } from "redux"; import { CREATE_CHANNEL, DISPLAY_CHANNEL_CREATOR, HIDE_CHANNEL_CREATOR, HANDLE_FORM_CHANGE, } from "../actions"; export interface channelCreatorInterface { open: boolean; state: "idle" | "saving" | "correctly saved"; channelName: ""; } export const channelCreatorInitialState: channelCreatorInterface = { open: false, state: "idle", channelName: "", }; export const channelCreatorReducer: Reducer<any, any> = ( channelCreatorState: channelCreatorInterface = channelCreatorInitialState, action: { type: any; state: channelCreatorInterface } ) => { switch (action.type) { case CREATE_CHANNEL: return { ...channelCreatorState, state: "saving", }; case DISPLAY_CHANNEL_CREATOR: return { ...channelCreatorState, open: true, }; case HIDE_CHANNEL_CREATOR: return { ...channelCreatorState, open: false, }; case HANDLE_FORM_CHANGE: return { ...channelCreatorState, channelName: "", }; default: return channelCreatorState; } };

---

Answer 1

首先，讓我們回到你的問題：

您的減速器需要使用您的操作中的有效載荷：

        case HANDLE_FORM_CHANGE:
            return {
                ...channelCreatorState,
                channelName: action.payload,
            };

然后在您的組件中，您將使用事件處理程序來分派具有該負載的操作：

const mapDispatchToProps = (dispatch: any) => ({
    // ...
    setChannelName: (channelName: string) => dispatch({ type: HANDLE_FORM_CHANGE, payload: channelName })
});
// in your component:
                    <TextField
                        autoFocus
                        margin='dense'
                        id='name'
                        label='Channel name'
                        type='username'
                        fullWidth
            onChange={event => props.setChannelName(event.target.value)}
                    />

但請注意，這是一種非常過時的 redux 編寫風格。 一方面，我們推薦使用 react-redux 鈎子useSelector和useDispatch ，它們可以替代函數組件中的connect 。 此外，我們建議使用redux 工具包而不是手動編寫普通的 redux reducers，因為這將為您節省大量代碼，並且對打字稿類型也有很大幫助。

如果您正在尋找最新的教程，官方Essentials 教程是最好的起點。

此外，如果您有任何不能作為 stackoverflow 問題的好材料的快速問題，請務必在 reactiflux discord 服務器上的官方 redux 頻道中訪問我們。