Смена хранилища в Redux

Question

Мне нужно изменить «глобальное» состояние Redux (я думаю, это называется хранилищем).Это мой код:

редуктор

export const user = (state = {}, action) => {
    console.log(4);
    console.log(action.type)
    console.log(action.payload)
    switch (action.type) {
        case C.SET_USER:
            console.log(action.payload);
            return action.payload;
        case C.CLEAR_USER:
            return action.payload;
        default:
            return state;
    }
};

Действие:

export const setUser = (user = {}) => {
    console.log(user);
    return {
        type: C.SET_USER,
        payload: user,
    }
};

Вызов действия:

const user = {test:true};
setUser(this.state.user);

Но если я запустите этокод, он не работает и не вызывает редуктор.Это вызывает действие, но не редуктор.Чего мне не хватает?

Мой текущий код app.js:

export default class App extends Component {
    constructor(p) {
        super(p);
        this.state = {user: null};
    }

    setUser = () => {
        const {uid} = firebase.auth().currentUser;
        firebase.database().ref('Users').child(uid).on('value', r => {
            const user = r.val();
            this.setState({user: user});
            console.log(this.state.user);
            setUser(this.state.user);
        });
    };

    componentWillMount() {
        if (firebase.auth().currentUser) {
            this.setUser();
        }
        firebase.auth().onAuthStateChanged(async () => {
            console.log('authChanged');
            if (!firebase.auth().currentUser) {
                return null;
            }
            this.setUser();
        });
    }


    render() {
        return (
            <div className="App">
                <Nav/>
            </div>
        );
    }
}

Answer 1

Пример: подключенный компонент, в котором вы хотите использовать действие setUser с redux

 import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import { setUser} from '../../actions';

    class YourComponent extends Component {
     render(){
      // now your redux action is passed to component as prop
      // and you can use it like
     this.props.setUser(some-user);
      return()
     }

}

export default connect(null, {setUser})(YourComponent);

Answer 2

Прежде всего вам нужно отправить действие, чтобы изменить состояние, во-вторых, вы должны подключить свой компонент к магазину

для подключения вашего компонента к магазину

...
import { connect } from 'react-redux';
class MyComponent extends React.Component {
     ...
}

export default connect((store) => ({...}))

при подключении компонента к магазину у вас будет доступ к функции dispatch в props

для отправки действия сделайте это:

this.props.dispatch(setUser());

Я думаю, это называется хранилище

Кстати, это называется магазин

Answer 3

setUser должен быть отправлен , а не просто называется :

store.dispatch(setUser(user));

Но это не совсем способ реагирования ,вам лучше использовать mapDispatchToProps в вашей функции connect , чтобы отправлять действия напрямую из компонентов компонентов.Что-то вроде:

import { setUser } from 'store/user';
// ...
class UserComponent extends React.Component {
  // ...
  someMethod() {
    this.props.setUser(user);
  }
}
export default connect(
  null,
  ({setUser: setUser})
)(UserComponent);

Это позволяет вашему компоненту React связываться с вашим магазином Redux оптимизированным и без ошибок способом.Это также способ, которым пользуется большинство разработчиков, поэтому вы, вероятно, найдете много документов по этому вопросу.