React-redux学习

Question

)

I'm currently learning React and Redux. I'm writing my 1st app which is an elevator simulator. The goal is easy. A keyboard allows the user to select the floor. Once selected a message is shown on a dashboard. After a delay the elevator should move to the floor requested (not implemented yet). A message is shown to monitor the current position of the elevator during the move (not implemented yet).
Currently the problem is when I click on a button, the state is not updated and I don't understand why:-(. If someone can point me where I'm wrong, thanks a lot !

Dashboard code

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;

Keyboard code

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;

The others elements of the app. In the app, those elements are in separated files

// 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

You are not adding your dispatch to your connect here:

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

you are using mapStateToProps twice, you need mapDispatchToProps in there as well.

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?) as per react-redux docs

Answer 2

After modifying the connect function as Doug suggested me, I modified handleSubmit function in the Keyboard.js

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

And the reducer

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

But what I still don't understand is in the handleSubmit is why to call the reducer then call setState? I would say this line is not needed. I commented out it and I get the same behavior. What do you think?