我应该如何使用 "redux-thunk" 作为异步初始状态？ (react/redux)

Question

这个问题已经被问过好几次了，但是我并没有真正理解我找到的答案。使用 React/Redux，我正在尝试使用 express 将异步数据获取到我的初始状态。因为我习惯了 d3，所以我的选择之一是使用“d3.json”...但如果它更好的话，我会很乐意使用其他东西。根据之前关于同一主题的回答，我添加了以下代码：

// redux action using a dispatcher (think middleware)
export function cool(url) {
    return function(dispatch) {
        return d3.json(url, response => {
            dispatch(setData(response))
        }
    }
}

// redux action
export function setData(data) {
 return {
        type: 'DATA_CHART_ALL',
        data
    }
}

const authorDataReducer = (state = {}, action) => {
    switch (action.type) {
      case 'DATA_CHART_ALL':
        return action.data
      case 'DATA_CHART_FILTER':
        return action.data
      default:
        return state;
    }
};

export authorDataReducer;

一开始我没有注意到，但根据我最近的了解，上面的代码或多或少地遵循了 redux-thunk 模式......所以从那里我尝试应用 redux-thunk 但我什么都做不了...

Answer 1

你的问题不是很清楚，我会尽量回答的。 Redux-thunk 是一种用于分派异步操作的中间件。在创建 redux store 时初始化它：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

const store = createStore(
    rootReducer,
    applyMiddleware(thunk)
);

为了加载异步数据，即使是针对初始状态，您也需要分派一个动作。如果你正在使用 React，你可以在你的最高阶组件挂载后执行此操作。

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';

import { fetchTodos } from '../action';
import TodoList from './TodoList';

class App extends Component {

    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.props.fetchTodos();
    }

    render() {
        return (
            <TodoList
                todos={this.props.todos}
            />
        );
    }
}

App.propTypes = {
    todos: PropTypes.array.isRequired
};

const mapStateToProps = (state, ownProps) => ({
    todos: state.todos
});

export default connect(
    mapStateToProps,
    {
        fetchTodos: fetchTodos
    }
)(App);

这将触发一个看起来像这样的动作

export const fetchTodos = () => {
    return (dispatch) => {
        return fetch(url).then((response) => {
            disptach({
                 type: 'received_todos',
                 payload: {
                     response.json()
                 }
            });
        });
    }
}

如您所见，我没有使用 d3，而是 fetch。我猜任何库都可以，只要你返回一个 Promise。

我应该如何使用 "redux-thunk" 作为异步初始状态？ (react/redux)

How should I use "redux-thunk" for Async Initial state ? (react/redux)

reactjs

redux

redux-thunk