Sandbox here

Question

我在Redux上创建了一个应用程序。
但是检查我的应用程序的人对此代码做了评论：

文件index.js（操作）：

export function fetchData(day) {
  return async dispatch => {
    dispatch({ type: "LOAD_DATA_START", day });
    const response = await fetch(`https://api.iev.aero/api/flights/${day}`);
    const data = (await response.json()).body;
    dispatch({ type: "LOAD_DATA_END", payload: { data, day } });
  };
}
export function setShift(shift) {
  return async dispatch => {
    dispatch({ type: "SET_SHIFT", shift });
  };
}

这样的话：

1）index.js文件中不应具有调度方法。调度方法必须位于文件中的matchDispatchToProps函数中 app.js（容器）

文件app.js（容器）：

export function searchFilter(search, data) {
  return data.filter(n => n["planeTypeID.code"].toLowerCase().includes(search));
}

const days = ["12-11-2019", "13-11-2019", "14-11-2019"];

class Root extends React.Component {
  componentDidMount() {
    this.props.onFetchData(days[this.props.propsReducer.day]);
  }

  render() {
    const { onFilter, onSetSearch, onFetchData } = this.props;
    const { search, shift, data, filteredData } = this.props.propsReducer;

    return (
      <div>
        <div className="content">

        <Header/>
        <br/>
        <div className="searchTitle">SEARCH FLIGHT</div>
             <br/>
        <TableSearch value={search} onChange={e => onSetSearch(e.target.value)} 
         onSearch={value => onFilter({ search: value })}/>
             <br/>
             <br/>
        <div className="buttonShift">
          {data && Object.keys(data).map(n => (
            <button data-shift={n} onClick={e => onFilter({ shift: e.target.dataset.shift })} className={n === shift ? "active" : "noActive"}>
                {n}
            </button>
          ))}
        </div>

        <div className="row">
        <span className="title">Yesterday: </span><span className="title">Today: </span><span className="title">Tomorrow: </span>
        </div>

        <div className="buttonDays">
          {days && days.map((day, i) => (
            <button  key={day} onClick={() => onFetchData(day)} className="buttonDaysOne">
                {day} 
            </button>
          ))}
        </div>

        {data && <TableData data={filteredData} />}
          </div>
        <Footer/>
      </div>
    );
  }
}

export const ConnectedRoot = connect(
  state => state,
  dispatch => ({
    onFilter: args => dispatch({ type: "RUN_FILTER", ...args }),
    onSetSearch: search => dispatch({ type: "SET_SEARCH", search }),
    onFetchData: day => dispatch(fetchData(day))
  })
)(Root);

app.js（containers）文件中的
1）不应为操作：{ type: "RUN_FILTER", ...args } { type: "SET_SEARCH", search } 操作必须位于文件index.js（actions）

2）此函数不应如下所示：

export const ConnectedRoot = connect(
  state => state,
  dispatch => ({
    onFilter: args => dispatch({ type: "RUN_FILTER", ...args }),
    onSetSearch: search => dispatch({ type: "SET_SEARCH", search }),
    onFetchData: day => dispatch(fetchData(day))
  })
)(Root);

一定是这样的：

也就是说，必须有方法：matchDispatchToProps和mapStateToProps。然后此方法需要在方法connect中编写。请帮助实现这一点。我才刚刚开始研究reducer，但不幸的是我无法实现它而不破坏应用程序...

沙箱中的代码（当我在文本编辑器中运行程序时忽略沙箱错误，此错误已消失并且应用程序运行良好）：

https://codesandbox.io/s/redux-ant-design-filter-table-column-with-slider-ho1j4

Answer 1

Sandbox here

将您的所有动作全部移至src/actions/index.js：

// src/actions/index.js

// ...other content

export function setSearch(search) {
  return dispatch => dispatch({ type: "SET_SEARCH", search });
}

export function runFilter(args) {
  return dispatch => dispatch({ type: "RUN_FILTER", ...args });
}

然后，在src/containers/app.js中：


import { setSearch, runFilter, fetchData } from "../actions";

// ...

const mapStateToProps = state => state;

const mapDispatchToProps = dispatch => ({
  onFilter: args => runFilter(...args),
  onSetSearch: search => setSearch(search),
  onFetchData: day => dispatch(fetchData(day))
});

export const ConnectedRoot = connect(
  mapStateToProps,
  mapDispatchToProps
)(Root);

说明

第一次批评

他们只希望您将所有操作保持在同一位置。这是大规模应用程序的常见做法。

因此，您将在src/actions/index.js中定义动作创建者，它们完全可以完成您已经在做的事情。

第二批评

他们希望您定义名为mapStateToProps和mapDispatchToProps的特定函数，并在调用connect()时引用它们。

同样，这不会改变应用程序的行为，这只是一种常见的模式。

如何在我的Redux应用程序中实现这些备注？

1 个答案:

Sandbox here

说明

第一次批评

第二批评