Как получить обновленное состояние в компоненте при использовании Redux

Question

Я новичок в Redx, я не понимаю, как получить State из Redux Store, когда у нас есть несколько Reducer. Скажем, это мой combReducer

import apiCallInProgress from './ApiStattusReducer'; 
import login from './loginReducer';

const rootReducer = combineReducers({
    login,
    apiCallInProgress
});

export default rootReducer;

// below is my Login Reducer
const initialState = {
    isAuthenticated: false,
    user: {}

};
export function loginReducer(state = initialState, action = {}) {
    console.log(action.user);
    switch (action.type) {
        case types.SET_CURRENT_USER:
            return {
                ...state,
                isAuthenticated: true,
                user: action.user
            }
        default:
            return state
    }

}
export default loginReducer;

// now I want to access  user from my component,
// I wrote as  
function mapStateToProps(state) {
    return {
        login: state.login
    }
}
componentDidMount() {
    const { login } = this.props
    console.log("set user didmount:" + login.user)
}
componentDidUpdate() {
    const { login } = this.props
    console.log("set user didupdate:" + login.user)

}

Я не могу получить состояние пользователя в компоненте, но когда я нажимаю кнопку входа в систему console.log (action.user), показывая правильный вывод в консоли.
Имена переменных, которые мы упомянули внутри combReducer, то же самое имя, которое мне нужно использовать внутри mapStateToProps fun c для извлечения состояния. Я очень смущен. Кто-нибудь, пожалуйста, объясните.

Answer 1

Я думаю, что вы все делаете правильно, пока не доберетесь до компонента (хотя его трудно полностью определить без реального тестирования кода). Основная проблема в том, насколько я вижу, что вы на самом деле не отправляете действие, поэтому login.user никогда не устанавливается.

У метода connect response-redux есть два функциональных параметра - mapStateToProps, который вы используете правильно, и mapDispatchToProps, который не похож на вас Используем.

mapDispatchToProps - это метод для передачи действий Redux в реквизит, который при вызове запускает действие, которое, в свою очередь, принимается редуктором, который возвращает новый объект состояния , Создайте новый каталог с именем actions в root вашего приложения. Внутри него создайте файл с именем loginActions.js и поместите в него что-то вроде следующего:

export function setCurrentUser(user) {
  return (dispatch) => {
    dispatch({ type: 'SET_CURRENT_USER', user)
  }
}

импортируйте эту функцию в свой компонент, затем в функцию соединения добавьте mapDispatchToProps

import { connect } from 'react-redux'
import { setCurrentUser } from './actions/loginActions'

// component code 

const mapDispatchToProps = {
  setCurrentUser: setCurrentUser
}

const mapStateToProps = (state) => {
    return {
        login: state.login
    }
}

connect(mapStateToProps, mapDispatchToProps)(YourComponentName)

В вашем методе componentDidMount вы можете вызывать это действие:

componentDidMount() {
  this.props.setCurrentUser('myUser')
}

в componentDidUpdate, пользователю теперь должно быть доступно:

componentDidUpdate(prevProps) {
  if (prevProps.login !== this.props.login) {
    console.log(this.props.login)
  }
}

Надеюсь, это поможет. Дайте мне знать, если вам нужна дополнительная помощь.