Redux: реквизит не определено

Question

Redux: неопределенная поддержка

Не определено Проп Я хочу передать реквизит из моего контейнерного компонента, вплоть до моего презентационного компонента, через реквизит, но я не смог этого сделать, если реквизит не был undefined . Почему число реквизит не передается в презентационный компонент?

Создание магазина с начальным stae и rootreducer:

import {createStore, applyMiddleware} from 'redux';
...
import rootReducer from './reducers/rootReducer';

const initialState = {
    multiply: 2,
    number: 1
}

export const store = createStore(
    ...initialState, 
    rootReducer, 
    applyMiddleware(logger(), thunk),
    window.devToolsExtension && window.devToolsExtension()
);

Редуктор для умножения и деления действий:

const multiplyReducer = (state = {}, action) => {
    switch (action.type) {
        case 'MULTIPLY':
            return state = {
                ...state,
                number: state.number * action.payload
            }
        case 'DIVIDE':
            return state = {
                ...state,
                number: state.number / action.payload
            }
        default:
            return state;
    }
}

export default multiplyReducer;

Корневой редуктор:

import {combineReducers} from 'redux';
import multiplyReducer from './multiplyReducer';

const rootReducer = combineReducers({
  multiply: multiplyReducer
});

export default rootReducer;

Завершение приложения в провайдере:

import Multiplier from './ContainerComponents/Multiplier';
import { BrowserRouter, Route } from 'react-router-dom';

const App = ({ store }) => (
    <BrowserRouter>
        <Route path="/" exact component={Multiplier}/>
    </BrowserRouter>
);

export default App;

Действия:

export const multiplyAction = {
    type: 'MULTIPLY',
    payload: 2
}

export const divideAction = {
    type: 'DIVIDE',
    payload: 2
}

Компонент контейнера:

    import MultiplierDisplay from '../StyleComponents/MultiplierDisplay';
    import {connect} from 'react-redux';
    import {multiplyAction, divideAction} from '../Redux/actions/multiplyActions';

    class Multiplier extends React.Component {

        render() {

            return (<MultiplierDisplay {...this.props} />)
        }
    };

    const mapStateToProps = (state) => {
        return {multiply: state.multiply, number: state.number}
    };

    const mapDispatchToProps = (dispatch) => {
        return {
            handleClick: (event) => {
                dispatch(multiplyAction)
            },
            handleClick2: (event) => {
                dispatch(divideAction)
            }
        }
    }

    export default connect(mapStateToProps, mapDispatchToProps)(Multiplier);

Презентационный компонент:

const MultiplierDisplay = (props) => {

        return (
            <div
                className="top"
                style={{
                alignContent: 'center',
                justifyContent: 'center'
            }}>
                <div className="App">
                    <header className="App-header">
                        <img src={logo} className="App-logo" alt="logo"/>
                        <h1 className="App-title">Welcome to React</h1>
                    </header>
                </div>
                <h1 style={{
                    marginLeft: 20
                }}>
                    Multiply the count:
                </h1>
                <p style={{
                    fontSize: '3em'
                }}>
                    Count: {props.number}
                </p>
                <button
                    style={{
                    marginLeft: 100,
                    width: '20%',
                    height: '20%'
                }}
                    onClick={props.handleClick}
                    title="Multiply">
                    Multiply
                </button>
                <button
                    style={{
                    marginLeft: 50,
                    width: '20%',
                    height: '20%'
                }}
                    onClick={props.handleClick2}
                    title="Divide">
                    Divide
                </button>
            </div>
        )
    }

    export default MultiplierDisplay;

Answer 1

Вы можете использовать это ниже для вашего кода

 const mapStateToProps = (state) => {
        return {multiply: state.multiply.multiply, number: state.multiply.number}
    };

Answer 2

Существует проблема в том, как вы сопоставляете свое состояние с реквизитами вашего Multiplier компонента, как написано в combReducer, который вы добавили multiply в качестве имени состояния для вашего multiplyReducer, следовательно, в вашем * Функция 1005 *, к которой вам нужно, может получить доступ к вашему состоянию multiplyReducer с помощью следующего кода:

const mapStateToProps = (state) => {
    return {multiply: state.multiply.multiply, number: state.multiply.number}
};

Спасибо, надеюсь, это поможет.

Answer 3

Номер вашего реквизита не передается компоненту презентации, если вы не передали его из контейнера,

class Multiplier extends React.Component {

    render() {

        return (<MultiplierDisplay/>)   // this is where you are not passing it down
    }
};

Если вам нужно передать все реквизиты компоненту MultiplierDisplay, вы можете написать

class Multiplier extends React.Component {

    render() {

        return (<MultiplierDisplay {...this.props}/>)
    }
};

или, если вы хотите передать выбранные реквизиты, вы можете написать их как

Множитель класса расширяет React.Component {

    render() {
        const { multiply, number, handleClick, handleClick2 } = this.props;
        return (<MultiplierDisplay multiply={multiply} number={number} handleClick={handleClick} handleClick2={handleClick2}/>)
    }
};

Также вам нужно получить состояние от state.multiple у вас есть номер и умножить на multiplierReducer, который вы используете как multiply

const mapStateToProps = (state) => {
    return {multiply: state.multiply.multiply, number: state.multiply.number}
};

const mapDispatchToProps = (dispatch) => {
    return {
        handleClick: (event) => {
            dispatch(multiplyAction)
        },
        handleClick2: (event) => {
            dispatch(divideAction)
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Multiplier);