添加博文后 Redux 状态未更新答案

【问题标题】：Redux state is not updating after adding a blog post添加博文后 Redux 状态未更新
【发布时间】：2022-01-15 10:01:24
【问题描述】：

好的，所以我有了这个 React 应用程序，它的后端是用 Node 和 Express 构建的。我有两个端点，getAllPosts 和 createPost。 getAllPosts 返回一个帖子数组，createPosts 返回一个包含状态和消息的对象。

所以在前端，我在 Redux 操作中获取数据，如下所示：

export const getPosts = () => async ( dispatch ) => {
    try {
        const config = {
            headers: {
                'Content-Type': 'application/json'
            }
        }

        const { data } = await axios.get( '/api/posts', config );

        dispatch({
            type: GET_POSTS_SUCCESS,
            payload: data
        });

    } catch ( error ) {
        console.log( error ) 
    }
}

export const createPost = ( postData ) => async ( dispatch ) => {
    try {
        const config = {
            headers: {
                'Content-Type': 'application/json'
            }
        }

        const { data } = await axios.post( '/api/post', postData, config );

        dispatch({
            type: CREATE_POST_SUCCESS,
            payload: data
        });

    } catch ( error ) {
        console.log( error )        
    }
}

reducer 看起来像这样：

export const getPostsReducer = ( state = [], action ) => {
    switch ( action.type ) {
        case GET_POSTS_SUCCESS:
            return {
                loading: false,
                posts: action.payload
            };
        default:
            return state;
    }
}

export const createPostReducer = ( state = [], action ) => {
    switch ( action.type ) {
        case CREATE_POST_SUCCESS:
            return {
                loading: false,
                response: action.payload
            };
        default:
            return state;
    }
}

我可以在第一个页面加载时成功呈现所有帖子，但是当我创建帖子时，新创建的帖子不会立即添加。如果我检查 Redux 开发工具，我看不到更新的列表。但是在我重新加载页面后，只有渲染或开发工具会显示更新的列表。 .

我在一个组件中调度getPosts，如下所示：

useEffect( () => {
        dispatch( getPosts() );
}, [ dispatch ] )

并像这样在另一个组件的submitHandler 中分派createPost：

const submitHandler = ( e ) => {
        e.preventDefault();
        dispatch( createPost( { post } ) );
}

我还尝试将submitHandler 放在调用getPosts 的同一组件中，以便调度它会触发useEffect 并再次调用getPosts 以获取更新的列表。但这也行不通。除此之外，我还尝试将来自getPosts 的返回列表添加为 useEffect 中的依赖项，但如果我记录它，那么日志上会打印出无限的数量。

我在这里做错了什么？

【问题讨论】：

您可以尝试的几件事是删除 createPost 函数的花括号。这样它看起来像这样 -> dispatch( createPost( post ) );然后，您也可以尝试将 ...state 添加到您的 reducer return 语句中，使其看起来像这样 return { ...state, loading: false, response: action.payload };对两个减速器执行相同的操作。
@LeonardoNoronhaSantos 我刚刚做了第二个。它没有更新。我无法删除花括号，因为我在后端接受了 req.body.post 的帖子。而 post 是一个对象

标签： javascript node.js reactjs redux react-hooks

【解决方案1】：

我会稍微改变一下结构：

在 createPost 方法中，我只返回数据而不是调度

export const createPost = ( postData ) => async ( dispatch ) => {
    try {
        const config = {
            headers: {
                'Content-Type': 'application/json'
            }
        }

        const { data } = await axios.post( '/api/post', postData, config );

        return data;

    } catch ( error ) {
        console.log( error )        
    }
}

然后在你的代码中我会

const submitHandler = ( e ) => {
    e.preventDefault();
    createPost({post}).then(data=>{
    dispatch({type:CREATE_POST, data})
 }

这绝对可以工作

【讨论】：

【解决方案2】：

问题似乎是 React 不知道创建了一个新帖子。在调用createPost() 之后，您需要调用getPosts()。

const submitHandler = (e) => {
  e.preventDefault();
  dispatch(createPost({ post }));
  dispatch(getPosts());
}

如果您想以更集中、可扩展的方式构建服务，请查看我关于 React 服务的博文：https://schneider-lukas.com/blog/react-connect-rest-api。您也可以将帖子存储在 Provider 组件中，以使其可供树中的所有组件使用，或者更好地创建单独的 Context、Provider 和 Consumer 来处理帖子。

【讨论】：