我可以在 redux 的一个组件中使用多个操作吗答案

【问题标题】：Can I use more than one action in a component in redux我可以在 redux 的一个组件中使用多个操作吗
【发布时间】：2020-01-24 21:28:18
【问题描述】：

我有两个操作：userIdContainer 和 projectContainer。

在 componentDidmount 中，我使用这些操作来获取我的项目数据和用户 ID

在 project.js 中：

import React , {Component} from "react";
import ProjectCard from "../Partials/Project/ProjectCard";
import AddNewProject from "../Partials/Project/AddNewProject";
import { connect } from "react-redux";
import { userIdContainer } from "../../actions";
import { projectContainer } from "../../actions";
import $ from "jquery";
import { project } from "../../reducers/project";

class Projects extends Component{
  state = {
    projects : [],
  }

  componentDidMount = () =>{
    let token = localStorage.getItem('access_token');
    let config = {
      headers: {'Authorization': "bearer " + token}
    };
    axios.get( 
      '/api/projects',
      config
    ).then(response =>{
      let {projects , userId } = response.data;
      this.props.dispatch(userIdContainer(userId));
      this.props.dispatch(projectContainer(projects));
      this.setState({
        projects : projects
      })
    }).catch(error =>{

    });
  }

  render(){
    console.log(this.props);
    let projects = this.props.projects;
    let aProjects = [];
    if (projects) {
      aProjects = $.map(projects , function(value , index){
        return [<ProjectCard key={index} project={value} />];
      });
    }
    return(
      <div className="card-container">
        {aProjects}
        <AddNewProject />
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return{
    projects : state.project.projects,
    userId : state.auth.userId
  }
}

export default connect(mapStateToProps)(Projects);

在 index.js（我的操作）中

export const userIdContainer = (userId) => {
  return{
    type : 'USER_ID_CONTAINER',
    userId
  }
};
export const projectContainer = (project) => {
  // console.log(project);
  return {
    type : 'PROJECT_CONTAINER',
    project
  }
}

在该组件渲染后，userId 返回 undefined，

如果我删除 projectContainer 操作，userIdContainer 将正常工作。

在此组件中使用多个操作的最佳方法是什么？

我使用了组合减速器

import { combineReducers } from "redux";
import { auth } from "./auth";
import { project } from "./project";

export default combineReducers({
    auth,
    project
})

这是我的身份验证器

export const auth = (state =[] , action ) => {
    // console.log(action.type);
    switch (action.type) {
        case 'IS_TOKEN_VALID' :
            // console.log(action);
            return {
                    token : action.token,
                    isUserLoggedIn : true
                }
            case 'USER_ID_CONTAINER' :
                return {
                        userId : action.userId
                    }
        default :
            return 'default';
    }
}

和项目减速器...

export const project = (state =[] , action ) => {
    switch (action.type) {
        case 'PROJECT_CONTAINER' :
            return {
                    ...state , 
                    projects : action.project
                }
        default :
            return 'default';
    }
}

【问题讨论】：

userId 未定义在哪里？在动作中还是在组件中？
请包括你的reducer的代码以及你如何确定“userIdContainer工作正常”
在组件中 userId 是 Undefined ，如果我删除 projectContainer 操作，userIdContainer 工作正常。在第一次渲染（在控制台日志中），userId 具有 value ，但在 projectContainer 运行之后，userId 更改为 undefined。 , @布莱恩汤普森
包括 ;) @Gennady Dogaev

标签： reactjs redux axios

【解决方案1】：

正如https://redux.js.org/basics/reducers 所说，

我们在默认情况下返回之前的状态。对于任何未知操作，返回之前的状态很重要。

原因 - Redux 将 action 传递给所有 reducer。这意味着，当您执行 this.props.dispatch(projectContainer(projects)); 时，两个减速器都会被调用。

你需要更换

default :
  return 'default';

与

default :
  return state;

在两个减速器中。

另外，当你这样做时，你会完全覆盖状态：

return {
  token : action.token,
  isUserLoggedIn : true
}

return {
  userId : action.userId
}

您可能需要将其更改为

return {
  ...state,
  token : action.token,
  isUserLoggedIn : true
}

return {
  ...state,
  userId : action.userId
}

【讨论】：