React + Redux + Firebase：了解调度程序的工作原理

Question

我正在通过创建一个 React 应用程序来学习 React（遵循 ~2 个教程）。事情有点乱，所以我想知道这个包含调度程序的函数到底做了什么：

export const fetchProjects = () => async dispatch => {
    projectsRef.once("value", snapshot => {
      dispatch({
        type: 'FETCH_PROJECTS',
        payload: snapshot.val()
      });
    });
  };

注意projectRef.once来自fbConfig文件中的这行代码：

const databaseRef = firebase.database().ref();
export const projectsRef = databaseRef.child('projects');
//the setup is working properly because I am succefully writing into the DB in another part of the app

对于上下文：此函数属于“动作”文件。它被另一个名为 ProjectList 的组件使用生命周期方法调用。下面是 ProjectList.js 的全部代码：

import React from 'react'
import ProjectSummary from './ProjectSummary'
import _ from "lodash";
import * as actions from '../../store/actions/projectActions'
import { connect } from "react-redux";

class ProjectList extends React.Component {
  constructor(props) {
    super(props);
  }

  renderProjects(){
    const { data } = this.props;
    const allprojects = _.map(data, (value, key) => {
      return <ProjectSummary key={key} project={value} />;
    });
    if (!_.isEmpty(allprojects)) {
      return allprojects;
    }
    return (
      <div className="col s10 offset-s1 center-align">
        <h4>You have no projects</h4>
        <p>Start by going to New Project and creating a new project</p>
      </div>
    );

  }

  componentWillMount() { 
    this.props.fetchProjects();
  }
  render() { 

  return (
      <div className="project-list section">
         {this.renderProjects()}
      </div>
    )
  }
}

const mapStateToProps = ({ data }) => {
  return {
    data
  };
};

export default connect(mapStateToProps, action)(ProjectList);

这里是具有上述动作的reducer作为案例：

const initState = {
  projects: []
}

const projectReducer = (state = initState, action) => {
  switch (action.type) {
     case 'FETCH_PROJETCS':
       return action.payload;
    case 'CREATE_PROJECT_SUCCESS':
      console.log('create project success');
      console.log(action.project);
      return state;
    case 'CREATE_PROJECT_ERROR':
      console.log('create project error');
      return state;
    default:
      return state;
  }
};

export default projectReducer;

我的问题是我不明白初始 fetchProjects 方法中的“有效负载”在哪里（它是在更新状态吗？是状态的哪一部分？）。应用程序的这一部分没有按预期工作（我无法从数据库加载数据）。感谢您为解决此问题提供的任何帮助。

Answer 1

好吧，其实redux其实是一个很大的话题。但我会简要解释一下代码中发生的情况。

redux 中有 3 个重要的东西 -

1. 商店
2. 操作
3. 减速机

每个人都有自己的工作。
存储是用于实际存储您的应用程序数据。操作用于指示需要对应用程序数据/存储执行哪些操作/操作
最后，reducer 实际上是根据从动作接收到的有效负载来改变存储状态。
现在了解您的代码流程或它是如何工作的 -

• 您正在调用 componentWillMount - fetchProjects 中的函数，这将在您的操作文件中调用操作。
• 然后在操作fetchProjects 内部，一旦您收到快照，它就会调度该操作（简而言之，它会调用带有有效负载的减速器）
  现在这里要注意的是dispatch是Redux store的一个函数。你打电话给商店。 dispatch 发送一个动作。这是触发状态更改的唯一方法。
  action 对象包含动作 type 和 payload 基于哪些 reducer 更新了 store。
• 然后最后在你的reducerprojectReducer根据switch case中的动作类型，它会执行那个代码块。在这里您可以根据收到的有效负载执行状态操作。
  现在，您的状态已使用减速器的状态返回值进行了更新。 它必须从 reducer 返回状态。

switch (action.type) {
    case 'FETCH_PROJETCS':
       return { 
           projects: action.payload    //this will update projects array inside store
           }
    case 'CREATE_PROJECT_SUCCESS':
      console.log('create project success');
      console.log(action.project);
      return state;
    case 'CREATE_PROJECT_ERROR':
      console.log('create project error');
      return state;
    default:
      return state;
  }

参考资料-
https://redux.js.org/api/store#store
https://redux.js.org/faq/actions