используя диспетчеризацию в компонентах

Question

Вопрос по функции dispatch(), поэтому мы обычно кодируем, как показано ниже:

const store = () => {
    const store = createStore(
        combineReducers({
            expenses: expensesReducer,
            filters: filtersReducer
        })
    );
    return store;
};
store.dispatch(...); // passing an action object

, но если мы используем 'connect' для подключения компонента и внутри компонента, мы можем кодировать как:

props.dispatch(...);

Я понимаю тот факт, что отправка передается компоненту, но реквизит не магазин, так как вы можете сделать как props.dispatch(...);?Разве этот метод dispatch () не может быть использован только для объекта store?

Answer 1

Когда вы используете connect из резервной копии для привязки вашего компонента к хранилищу, там dispatch подключается к хранилищу

Ваши функции mapDispatchToProps должны возвращать объект. Каждое поле объекта должно быть функцией, при вызове которой ожидается отправка действия в хранилище.

Документация Redux о matchDispatchToProps

Я надеюсь, что ответьте на ваш вопрос о том, как вы получаете способ доставки в ваш компонент.

Answer 2

Вот пример того, как может выглядеть проект

component.js

import { connect } from 'react-redux';



import { login } from './actions';


const Component = ({name, loginAction}) => {

    return <div onClick={loginAction}>login</div>;

}

const mapStateToProps = state => ({
  name: state.user.name
});

const mapDispatchToProps = {
  loginAction: login
};

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

action.js

export const loggedIn = payload => ({ type: "LOGIN_USER", payload });

export const login = () => dispatch =>  dispatch(loggedIn(true));

Действия будут отправляться, когда mapDispatchToProps.Вам не нужно делать ничего особенного.просто включите ваше действие и сожмите библиотеку, и все остальное сделает за вас.

РЕДАКТИРОВАТЬ: вам вообще не нужно отправлять.это должно работать для обновления магазина.

action.js

export const login = payload => ({ type: "LOGIN_USER", payload });