React-Redux 如何分派一个动作

Question

我目前正在学习 redux，但我无法弄清楚如何分派一个动作。我有一个带有输入字段的组件，我希望保存用户输入的文本，以便我可以在另一个页面上显示它。

这是我的操作：

export const addMovement = () => {
    const response = {
        movement: {
            name: '',
            weight: '',
        } 
    }

    return {
        type: constants.ADD_MOVEMENT,
        payload: response
    }
   
};

这是我的减速器：

const intialState = {
    movement: {
        name: '',
        weight: '',
    } 
};

const movementReducer = (state = intialState, action) => {
    switch (action.type) {
        case GET_MOVEMENT:
            return [ ...state, action.payload ]
        default:
            return state;
    }
};

export default movementReducer;

这是我的组件：

const AddPage = () => {
    const [name, setName] = useState('');
    const [weight, setWeight] = useState(0);
    const onSubmit = () => {
        addMovement();
    }

    return (
        <div>
            <Header title="Add Page" />
            <div>
                <div>
                    <TextField  
                        key="name" 
                        label="Enter Movement Name" 
                        InputProps= {{className: "textBoxColor"}}
                        variant="outlined"
                        onChange={event => {
                            const { value } = event.target;
                            setName(value);
                        }} 
                         />    
                    <TextField 
                        key="weight" 
                        label="Enter Movement Weight" 
                        type="number" 
                        variant="outlined"
                        onChange={event => {
                            const { value } = event.target;
                            setWeight(value);
                        }}
                        InputProps= {{endAdornment: <InputAdornment position="end">lb</InputAdornment> }} />
                    <Button 
                        variant="outlined"
                        onClick={ onSubmit }
                        >
                        <AddCircleIcon />
                    </Button>
                </div>
            </div>
        </div>
    );
};

const mapStateToProps = (state) => {
    return {
        newName: state.name,
        newWeight: state.weight,
    }
};

const mapDispatchToProps = (dispatch) => {
    return (
        dispatch(addMovement)
    )
};

const withConnect = connect(
    mapStateToProps,
    mapDispatchToProps,
);

export default compose(withConnect)(AddPage)

如有任何帮助，我们将不胜感激

Answer 1

最好用一个例子来解释

如果你想在 redux 状态下设置当前用户对象

export const SetcurrentUser = user => ({
    type: 'SET_CURRENT_USER',
    payload: user
});

为了使用用户参数调用 SetcurretnUser 操作。

function mapDispatchToProps(dispatch) {
    return({
        SetcurrentUser: (user) => dispatch(SetcurrentUser(user))
    })
}

现在你的情况是：

案例：1 如果你的 Redux state 需要一个 payload

//take response as parameter in your action you may destructure it if necessary

export const addMovement = (response) => {
    return {
        type: constants.ADD_MOVEMENT,
        payload: response
    }
   
};

function mapDispatchToProps(dispatch) {
    return({
        addMovement: (response) => dispatch(addMovement(response))
    })
}

Case:2 如果只需要action 没有payload

export const addMovement = () => {
    return {
        type: constants.ADD_MOVEMENT,
    }
   
};

function mapDispatchToProps(dispatch) {
    return({
        addMovement: () => dispatch(addMovement())
    })
}

Answer 2

随着你的学习，你可以使用带钩子的功能组件。在 redux hooks 中，很容易从商店中读取以及使用 useSelector() 和 useDispatch() hooks 调度操作。

const items = useSelector(state => state.reducerName.itemName)

您可以尝试使用 React 社区推荐的功能组件编写代码

React-Redux 如何分派一个动作

React-Redux how to dispatch an action

action

redux

react-redux

最好用一个例子来解释

案例：1 如果你的 Redux state 需要一个 payload

Case:2 如果只需要action 没有payload