我应该如何将“redux-thunk”用于异步初始状态？ （反应/减少）

Posted 2023-02-22

【中文标题】我应该如何将“redux-thunk”用于异步初始状态？ （反应/减少）

【英文标题】：How should I use "redux-thunk" for Async Initial state ? (react/redux)

【发布时间】：2016-12-18 20:20:44

【问题描述】：

这个问题已经被问过好几次了，但是我并没有真正理解我找到的答案。使用 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 但我可以'什么都做不了……

【参考方案1】：

你的问题不是很清楚，但我会尽量回答。 Redux-thunk 是一个用于调度异步操作的中间件。您在创建 redux 存储时对其进行初始化：

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，任何库都是好的。

【讨论】：

当我在connect 中添加 fetchTodos: fetchTodos 时出现以下错误finalMergeProps is not a function

fetchTodos 应该是您导入的操作。连接中的 fetchTodos: fetchTodos 只是将动作映射到道具的一种方式，这样您就可以在组件中像this.props.fetchTodos 一样调用它

是的，我已经导入了它。我需要对减速器做任何事情吗？当你说承诺时，你是什么意思？再次感谢！

Promise 用于从异步操作返回数据。我认为你应该阅读redux doc，因为那里有很多信息和一些很好的例子。