React-redux обучение - PullRequest
Новая
       47

React-redux обучение

0 голосов
/ 04 августа 2020

)

Я сейчас изучаю 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;

Ответы [ 2 ]

0 голосов
/ 05 августа 2020

После изменения функции подключения, как предложил мне Дуг, я изменил функцию handleSubmit на клавиатуре. 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 })
    }

И редуктор 

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 - это зачем вызывать редуктор, а затем вызывать setState? Я бы сказал, что эта строка не нужна. Я закомментировал это, и у меня такое же поведение. Как вы думаете?

0 голосов
/ 04 августа 2020

Вы не добавляете свою рассылку в свое соединение здесь:

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

вы используете mapStateToProps дважды, вам также понадобится mapDispatchToProps.

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?) согласно response-redux docs

...