Question

我不能说谎，我对react-redux有点困惑。我认为很多动作都需要参数（例如从商店中删除项目），但即使我仍在阅读如何以这种方式从组件发送传递参数，大约2个小时，我没有＆＃39;得到任何答案。我尝试使用this.props.dispatch和mapDispatchToProps，我总是收到this.props... is not a function消息。这就是我想要做的事情：

＆＃13;

  const getTheArray = (array) => {
    return {
      type: 'GET_ARRAY',
      array
    }
  }
    
    class Example extends......
    
    componentDidUpdate(){
    //i have a button, and when it clicked, turns the status: 'deleted'
        if (this.state.status === 'deleted'){
            fetch('http://localhost:3001/deleteitem', {
                method: 'post',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    id: this.props.id
                })
            })
            .then(res => res.json())
            .then(data => this.props.deleteFromArray(data))
            .catch(err => console.log(err)) 
        }
    }




function mapStateToProps(state) {
    return {
        array: state.array
    };
}
function mapDispatchToProps(dispatch) {
    return({
        deleteFromArray: (array) => {dispatch(getTheArray(array))}
    })
}
  
export default connect(mapStateToProps, mapDispatchToProps)(Example);

＆＃13;

它不是我需要通过动作发送的唯一地方，其中动作的对象的属性取决于传递给该函数的另一个属性，所以我真的想这样做，什么是将属性传递给行动的最佳方式，并将其分配到反应组件中。

Answer 1

<Home />

在你的dumbComponents中，只需要调用例如this.props.deleteFromArray（[1,2,3,4]）

这应该可以解决问题。你没有与派遣约束

Answer 2

react-redux的使用

您需要先导入操作

import { storeProfiles } from 'actions/profiles';

定义道具

 const {
     storeProfiles
  } = props;

获取userEffect的数据使用情况

useEffect(() => {
    fetchProfiles().then(storeProfiles);
  }, [ fetchProfiles, storeProfiles ]);

映射到道具

const mapDispatchToProps = dispatch => ({
 
  storeProfiles: x => dispatch(storeProfiles(x))
});
export default connect(mapStateToProps, mapDispatchToProps)(Component);

Read official documentation

Answer 3

使用es6： const mapDispatchToProps = (dispatch) => ({ addToCart: (params) => dispatch(actions.addToCart(params)), });

Answer 4

实际上，我认为您不必将参数传递给类似的动作。我正在使用带有TypeScript和Redux和thunk的React Hooks。我使用动作创建者删除帖子的方式如下：

PostDetails.tsx组件：

import {deletePost, getPost, LanguageActionTypeEnum} from "../../../../app/store/aspian-core/actions";

interface IPostDetailsProps {
    getPost: Function;

    // action for deleting a post
    deletePost: Function;

    loadingInitial: boolean;
    submitting: boolean;
    post: IPost | undefined;
    lang: LanguageActionTypeEnum;
}

const PostDetails: FC<PostDetailsProps> = ({
                                               match, getPost,
                                               lang, loadingInitial,
                                               submitting, deletePost, post
                                           }) => {



}


// To delete a post
    const onDeleteBtnClick = async (id: string) => {
        try {

            /// using deletePost action and passing id to it
            await deletePost(id);

            message.success(t('messages.post-deleting-success'));
        } catch (error) {
            message.error(t('messages.post-deleting-error'));
        }
    };

return (

   // omitted for brevity

   <Popconfirm
                    key={uuidv4()}
                    title={t('popconfirm.title')}
                    
                    /// calling onDeleteBtnClick() here
                    onConfirm={() => onDeleteBtnClick(post!.id)}  

                    okText={t('popconfirm.ok-text')}
                    cancelText={t('popconfirm.cancel-text')}
                    placement={lang === LanguageActionTypeEnum.en ? 'left' : 'right'}
                    okButtonProps={{
                        danger: true,
                    }}
                >
                    <Button
                        loading={submitting}
                        size="small"
                        type="primary"
                        icon={<DeleteFilled/>}
                        danger
                    >
                        {t('buttons.delete')}
                    </Button>
                </Popconfirm>

     // omitted for brevity
  )

}

// Redux State To Map
const mapStateToProps = ({post, locale}: IStoreState): { post: IPost | undefined, submitting: boolean, loadingInitial: boolean, lang: LanguageActionTypeEnum } => {
    return {
        post: post.post,
        submitting: post.submitting,
        loadingInitial: post.loadingInitial,
        lang: locale.lang
    }
}

// Redux Dispatch To Map
const mapDispatchToProps = {
    getPost,

    // mapped deletePost action to props here
    // and I will be able to pass id to its argument later
    deletePost
}

export default connect(mapStateToProps, mapDispatchToProps)(PostDetails);

我的动作创建者如下：

postActions.ts：

export const deletePost = (id: string) => async (dispatch: Dispatch) => {
    try {
        dispatch(setPostSubmitting(true));
        await agent.Posts.delete([id]);

        dispatch<IDeletePostAction>({
            type: PostActionTypes.DELETE_SINGLE_POST,
            payload: {
                id,
                submitting: false
            }
        })
    } catch (error) {
        console.log(error);
        dispatch(setPostSubmitting(false));
        throw error;
    }
}

它工作正常。希望它能对您的情况有所帮助。

将参数传递给mapDispatchToProps（）

4 个答案:

react-redux的使用

定义道具

获取userEffect的数据使用情况

映射到道具