添加博客后 Redux 状态未更新 post

Question

好的，我有这个 React 应用程序，后端是用 Node 和 Express 构建的。我有两个端点，getAllPosts 和 createPost。 getAllPosts returns post 数组和 createPosts returns 具有状态和消息的对象。

所以在前端，我在 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 )        
    }
}

减速器看起来像这样：

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;
    }
}

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

我正在像这样在一个组件中调度 getPosts：

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

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

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

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

我做错了什么？

Answer 1

我稍微改变一下结构：

在 createPost 方法中，我只是 return 数据

而不是调度

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})
 }

这绝对有效

Answer 2

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

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

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

添加博客后 Redux 状态未更新 post

Redux state is not updating after adding a blog post

javascript

node.js

reactjs

redux

react-hooks