如何获取调度冗余

How to get dispatch redux

本文关键字：调度 冗余 获取 何获取      更新时间：2023-09-26

我正在学习 redux 和 react。我正在遵循一些教程，以便制作应用程序。

我有这个action：

export function getDueDates(){
  return {
    type: 'getDueDate',
    todo
  }
}

这是商店：

import { createStore } from 'redux';
import duedates from './reducers/duedates'
export default createStore(duedates)

这是减速器：

从"不可变"导入不可变

export default (state = Immutable.List(['Code More!']), action) => {
  switch(action.type) {
    case 'getDueDate':
      return state.unshift(action.todo)
    default:
      return state
  }
}

在entry point js我有这个：

import React from 'react';
import ReactDOM from 'react-dom';
import store from './app/store'
import { Provider } from 'react-redux'
import App from './app/Components/AppComponent';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('app')
);

现在，（根据一些示例），我应该从dispatch调用getDueDate，但我不知道如何获取组件上的dispatch以触发操作

使用react-redux包中的connect。它有两个函数作为参数，mapStateToProps和mapDispatchToProps，你现在感兴趣。根据Nick Ball的回答，这是部分正确的，您将像这样导出：

export default connect(mapStateToProps, mapDispatchToProps)(App)

您的mapDispatchToProps将如下所示：

function mapDispatchToProps (dispatch, ownProps) {
  return {
    getDueDate: dispatch(getDueDate(ownProps.id))
  }
}

只要连接到存储的组件具有从上面传递的属性 ID，您就可以从其内部调用this.props.getDueDate()。

编辑：在这种情况下可能不需要使用id，但我的观点是指出道具作为第二个参数:)

这里缺少的是react-redux的connect函数。此函数会将组件"连接"到存储区，为其提供dispatch方法。 具体如何执行此操作存在差异，因此我建议阅读文档，但一个简单的方法是这样的：

// app/Components/AppComponent.js
import { connect } from 'react-redux';
export class App extends React.Component {
    /* ...you regular class stuff */
    render() {
        // todos are available as props here from the `mapStateToProps`
        const { todos, dispatch } = this.props;
        return <div> /* ... */ </div>;
    }
}
function mapStateToProps(state) {
    return {
        todos: state.todos
    };
}
// The default export is now the "connected" component
// You'll be provided the dispatch method as a prop
export default connect(mapStateToProps)(App);
相关文章：