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（）调用的dispatch部分，以进行redux-form设置。分别为：

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

如何使用React，Redux和redux-form刷新状态

1 个答案: