如何使用React，Redux和Redux表单刷新状态

Question

这些技术还算陌生，而且机智即将终结。 我有两个组成部分； 一个包含表单（使用redux-form）并将新记录写入数据库的父级，以及列出一些数据的子级。

我唯一无法工作的是在表单提交完成后刷新该子列表。 如果刷新页面，则可以看到新数据。 根据我的阅读，据我了解，通过连接redux-form，我的状态将自动刷新……等等。 我什至会以正确的方式这样做吗？ 这就是一切...

我的索引减少器：

import { combineReducers } from 'redux';
import { reducer as formReducer } from "redux-form";
import ItemsReducer from "../reducers/items";

const rootReducer = combineReducers({
    form: formReducer,
    items: ItemsReducer
});

export default rootReducer;

我的物品减速器：

import { GET_ALL_ITEMS } from "../actions/items";

export default (state = {}, action) => {
    switch (action.type) {
        case GET_ALL_ITEMS:
            return action.payload.data;
        default:
            return state;
    }
}

我的动作：

import axios from "axios";

export const GET_ALL_ITEMS = "GET_ALL_ITEMS";
export const SAVE_ITEM = "SAVE_ITEM";

const ROOT_API_URL = "http://myapi:3000/api";

export function getAllItems() {
    let request = axios.get(`${ROOT_API_URL}/items`);
    return {
        type: GET_ALL_ITEMS,
        payload: request
    };
}

export function saveItem(item, callback) {
    let request = axios
        .post(`${ROOT_API_URL}/item`, item)
        .then(() => callback());
    return {
        type: SAVE_ITEM,
        payload: request
    };
}

（缩写的）父母（清单和表格）：

import ItemsList from "./items_list";

...

onSubmit = (item) => {
    let { saveItem } = this.props;
    saveItem(item, () => {
        // this is successful
    });
}

...

//the list in render()
<div>
    <ItemsList />
</div>

...

//redux-form wired up at bottom

export default reduxForm({
    form: "EditItemForm",
})(connect(null, { saveItem })(Items));

子组件：

import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { getAllItems } from "../actions/items";

class Shows extends Component {
    componentDidMount() {
        this.props.getAllItems();
    }

    render() {
        return(
            <div className="body-content-partial">
                {this.renderItems()}
            </div>
        );
    }

    renderItems() {
        let { items } = this.props;
        return items.map(item => {
            return(
                <a href="#" key={item.id}>
                    <div className="list-item-noavatar list-lines-div">
                        <div className="list-title">
                            {item.name}
                        </div>
                        <div className="status-div">
                            <span className="status-indicator"></span>
                            {item.active}
                        </div>
                    </div>
                </a>
            );
        });
    }
}

function mapStateToProps(state) {
    return { items: state.items };
}

export default connect(mapStateToProps, { getAllItems })(Items);

Answer 1

好的，这次绝对可以解决。 我必须在表单提交上调用getAllItems（），并将其传递到connect（）调用的调度部分，以进行redux表单设置。 分别：

import { saveItem, getAllItems } from "../actions/items";

...

onSubmit = (item) => {
    let { saveItem, onSave, getAllItems } = this.props;
    saveItem(item, () => {
        onSave();
        getAllItems();
    });
}

...

export default reduxForm({
    form: "ItemEditForm",
})(connect(null, { saveItem, getAllItems })(ItemEditForm));