React-redux 学习

Question

)

我目前正在学习 React 和 Redux。我正在编写我的第一个应用程序，它是一个电梯模拟器。目标很简单。键盘允许用户选择楼层。选择后，仪表板上会显示一条消息。延迟后，电梯应该移动到请求的楼层（尚未实施）。显示一条消息以监控电梯在移动过程中的当前位置（尚未实施）。
目前的问题是当我点击一个按钮时，状态没有更新，我不明白为什么:-(。如果有人能指出我哪里错了，非常感谢！

仪表板代码

import React from 'react';
import { connect } from "react-redux";
import { Container, Row, Col } from 'react-bootstrap';


const mapStateToProps = state => {
    return {
        elevator: state.elevator
        , inMove: state.inMove
    };
}

const ConnectedDashboard = ({ elevator, inMove }) => {
    return (
        <Container>
            <Row>
                <Col>Current position: {elevator.position}, floor selected: {elevator.floor_selected}, in move: {inMove.toString()} </Col>
            </Row>
        </Container>
        )
};

const Dashboard = connect(mapStateToProps)(ConnectedDashboard);

export default Dashboard;

键盘代码

import React, { Component } from 'react';
import { connect } from "react-redux";
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

import { floorSelected } from '../Action/action';




function mapDispatchToProps(dispatch) {
    return {
        floorSelected: floor => dispatch(floorSelected(floor))
    };
}

const mapStateToProps = state => {
    return {
        elevator: state.elevator
        , inMove: state.inMove
    };
}


class ConnectedKeyboard extends Component {
    constructor(props) {
        super(props);
        this.state = {
            elevator: { position: 0, floor_selected: 0 }
            , inMove: false
        };

        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
        event.preventDefault();
        this.props.floorSelected(event.target.value);
        this.setState({ elevator: { position: 0, floor_selected: event.target.value }, inMove: false })
    }

    render() {
        return (
            <Form>
                <Button variant="primary" type="submit" value="0" onSubmit={this.handleSubmit} >
                    0
      </Button>
                <Button variant="primary" type="submit" value="1" onSubmit={this.handleSubmit} >
                    1
      </Button>
                <Button variant="primary" type="submit" value="2" onSubmit={this.handleSubmit} >
                    2
      </Button>
                <Button variant="primary" type="submit" value="3" onSubmit={this.handleSubmit} >
                    3
      </Button>
                <Button variant="primary" type="submit" value="4" onSubmit={this.handleSubmit} >
                    4
      </Button>
                <Button variant="primary" type="submit" value="5" onSubmit={this.handleSubmit} >
                    5
      </Button>
                <Button variant="primary" type="submit" value="6" onSubmit={this.handleSubmit} >
                    6
      </Button>
                <Button variant="primary" type="submit" value="7" onSubmit={this.handleSubmit} >
                    7
      </Button>
                <Button variant="primary" type="submit" value="8" onSubmit={this.handleSubmit} >
                    8
      </Button>
                <Button variant="primary" type="submit" value="9" onSubmit={this.handleSubmit} >
                    9
      </Button>
            </Form>
        );
    }
}

const Keyboard = connect(mapStateToProps, mapStateToProps)(ConnectedKeyboard);

export default Keyboard;

应用程序的其他元素。在应用程序中，这些元素位于单独的文件中

// App
import React from 'react';
import Keyboard from './Components/Keyboard';
import Dashboard from './Components/Dashboard';
import { Provider } from 'react-redux';
import store from './store';


import { createStore, combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

function App() {
    return (
        <Provider store={store}>
            <Dashboard />
            <Keyboard />
        </Provider>
    );
}

export default App;


// Store
import { createStore } from "redux";
import rootReducer from "./Reducer/rootReducer";

const store = createStore(rootReducer);

export default store;

// Action
import { FLOOR_SELECTED } from '../Constants/action-type';

export function floorSelected(payload) {
    return { type: FLOOR_SELECTED, payload }
};

// Constants
export const FLOOR_SELECTED = "FLOOR_SELECTED";



// Reducers
import { FLOOR_SELECTED } from '../Constants/action-type';

const initialState = {
    elevator: { position: 0, floor_selected: 0 }
    , inMove: false
};


function rootReducer(state = initialState, action) {
    if (action.type === FLOOR_SELECTED) {
        return Object.assign({}, state, {
            elevator: action.payload
        });
    }
    return state;
};

export default rootReducer;

Answer 1

您没有在此处将您的调度添加到您的连接中：

const Keyboard = connect(mapStateToProps, mapStateToProps)(ConnectedKeyboard);

你使用了两次mapStateToProps，你也需要mapDispatchToProps。

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?) 根据react-redux docs

Answer 2

按照 Doug 的建议修改了 connect 函数后，我在 Keyboard.js 中修改了 handleSubmit 函数

handleSubmit(event) {
        console.log("handleSubmit call...");
        event.preventDefault();
        this.props.floorSelected(event.nativeEvent.submitter.value);
        this.setState({ elevator: { position: 0, floor_selected: event.nativeEvent.submitter.value }, inMove: false })
    }

还有减速器

function rootReducer(state = initialState, action) {
    console.log("rootReducer call...");
    console.log(action.type);
    if (action.type === FLOOR_SELECTED) {
        return Object.assign({}, state, {
            elevator: {
                position: state.elevator.position
                , floor_selected: action.payload
            }
        });
    }
    return state;
};

但我仍然不明白的是，在 handleSubmit 中为什么要调用 reducer 然后调用 setState ？我会说这条线是不需要的。我评论了它，我得到了同样的行为。你怎么看？