时间戳

首页 > 解决方案 > 如何将我的初始状态放入我的减速器文件中？

javascript - 如何将我的初始状态放入我的减速器文件中？

问题描述

每当用户单击<Button/>时，它都会在数据库中将其存储为 FIRST_PERSON_CHOSEN

而不是somebody（根据reducer.js文件）。

我想使用文件initialState中的 ，reducer.js因为到目前为止，它甚至可能不存在——它什么也没做。

在里面Main.js，personPlacedInFirebase()持有的功能() => this.firstPersonChosen()是开火FIRST_PERSON_CHOSEN和不开火somebody。

我该如何做到这一点？如果需要其他信息，请告诉我，我会发布。

这是我的Main.js文件： 

import React, { Component } from 'react';
import { connect } from 'react-redux';

import Modal from 'react-modal';    
import Aux from '../../../../hoc/Aux';
import Button from '../Buttons/Button';
import CheckoutButton from '../../../../components/UI/buttons/CheckoutButton/CheckoutButton';

import { FIRST_PERSON_CHOSEN } from "../../../../store/action/PersonChosenAction";     
import { CLOSE_MODAL, OPEN_MODAL } from "../../../../store/action/NoNameAction";

class Main extends Component {    
    componentWillMount() {
        Modal.setAppElement('body');
    }

    personPlacedInFirebase() {
     axios.post('./chosen.json', this.props.firstPersonChosen())
        .then(response => {
            console.log("person placed check firebase");
        }).catch(error => {
        console.log(error);
    })
}

    render() {
        return (
            <Aux>
                <Button clicked={() => this.personPlacedInFirebase()} label={"This button"}/>               

                <CheckoutButton clicked={() => this.props.openModalRedux()}/>

                <Modal isOpen={this.props.isOpen}>
                 <p>{this.props.thisButtonChosen}</p>
                    <button onClick={() => this.props.closeModalRedux()}>Close</button>
                </Modal>
            </Aux>
        );
    }
}

const mapStateToProps = state => {
    return {
        isOpen: state.global.isModalOpen,
        clicked: state.personChosen.differentPeople
    }
};

const mapDispatchToProps = dispatch => {
    return {
        firstPersonChosen: () => dispatch({type: FIRST_PERSON_CHOSEN}),

        // Modal handlers
        openModalRedux: () => dispatch({type: OPEN_MODAL}),
        closeModalRedux: () => dispatch({type: CLOSE_MODAL})

    }
};

这是我的reducer.js文件：

import React from 'react';
import * as actionTypes from '../action/FIRST_PERSON_CHOSEN';

const initialState = {
    personName: ' '
};

const personChosen = (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.FIRST_PERSON_CHOSEN:
            return {
                ...state,
                personName: 'somebody'
            };
    }
    return state;
}

export default personChosen;

标签： javascriptreactjsdebuggingreduxreact-redux

解决方案

如果你注意到这一行

axios.post('./chosen.json', this.props.firstPersonChosen())

第二个参数是调用调度动作

this.props.firstPersonChosen()

不会返回对象，它只会将操作分派给减速器。

所以在

let name = 'somebody';
axios.post('...url',{name})

您应该明确传递要保存在数据库中的值，并在成功时将操作分派给减速器。如果要更新应用程序状态，也可以传递名称。

.then(response => this.props.firstPersonChosen(name))

如果您将名称参数传递给 firstPersonChosen，则更新其在 mapDispatchToProps 中的定义，因此它将接受名称作为参数并可以进一步传递给减速器。

注意：您也可以将初始值保存在一个通用文件中，就像对常量所做的那样。所以初始状态将是可重复使用的。

推荐阅读