在反应应用程序中使用 redux 更新状态的正确方法是什么？答案

【问题标题】：What is the right way to update state with redux in a react application?在反应应用程序中使用 redux 更新状态的正确方法是什么？
【发布时间】：2018-08-08 19:14:08
【问题描述】：

我刚开始做出反应并正在学习课程。我发现在使用异步代码更新它时状态有点混乱。在我正在做的教程中，我发誓说你需要使用 thunk 来处理使用 react/redux 更新状态。我对此持怀疑态度，而且我是新手，我并不完全理解这一点。我已经编写了这个反应组件和减速器，它工作正常，因为它会更新博客，将它发送到服务器，接收它，并在收到 200 响应时更新状态，但我想知道是否有它有问题，而不是使用来自 http 请求的数据更新状态的正确方法。

博客组件

import React, {Component} from 'react';
import axios from '../../http/axios/axios';
import Card from '../../components/UI/Card/Card';
import classes from '../Container.css';
import Button from '../../components/UI/Button/Button';
import * as actionTypes from '../../store/actions/actions';
import { connect } from 'react-redux';


    class Blog extends Component{

        toggleApprovedAndUpdate = (blog) => {
            blog.approved = ! blog.approved
            this.props.updateBlog(blog)
        }

        render() {
            let blogs = this.props.blgs.map((b, index) =>
                    <Card
                        title={b.title}
                        description={b.description}
                        approved={b.approved.toString()}
                        imagePath={b.image}
                        action={this.toggleApprovedAndUpdate.bind(this, b)}
                        key={index} />)
            return(
                <div>
                    <div className={classes.Container}>
                        <Button
                            label={"Get all blogs"}
                            action={this.props.getBlogs}
                        />
                        {blogs}
                    </div>
                </div>
            )
        }
    }


    const mapStateToProps = state => {
        return {blgs: state.blog.blogs};

    };

    const mapDispatchToProps = dispatch => {
        return {
            getBlogs: () => {
                axios.get('/blog')
                    .then((response) => {
                        return dispatch({type: actionTypes.GET_ALL_BLOGS, blogs: response.data})
                    })
            },
            updateBlog: (blog) => {
                axios.put('/blog', blog)
                    .then((response) => {
                        return dispatch({type: actionTypes.UPDATE_BLOG, blogs: response.data})
                    })
            }
        }
    };

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

博客缩减器

import * as actionTypes from './actions';

const initialState = {
    blogs: []
}
const reducer = (state = initialState, action) => {
    switch(action.type){
        case actionTypes.GET_ALL_BLOGS:
            return {
                ...state,
                blogs: action.blogs
            }
        case actionTypes.UPDATE_BLOG:
            return {
                ...state,
                blogs: state.blogs.map((blog) => blog.id === action.blogs.id ? {...blog, approved:action.blogs.approved}: blog )
            }
    }
    return state;
}

export default reducer;

【问题讨论】：

stackoverflow.com/questions/35411423/… 这个答案涵盖了几乎各种异步场景。附带说明 - 您在创建组件时使用索引作为键。不建议这样做：reactjs.org/docs/lists-and-keys.html#keys 也许改用 blog.id？

标签： reactjs redux

【解决方案1】：

我的理解是，您可以像在示例中那样调用异步函数，而无需中间件。像 redux-thunk 这样的中间件所做的就是在调度的操作中添加 ID，对它们进行“排序”，避免诸如 Writing Async Code in redux 中描述的竞争条件。

【讨论】：