我應該如何使用「redux-thunk」作爲Async Initial狀態？ （react/redux）

Question

這個問題已經有好幾次了，但是我並沒有真正理解我找到的答案。使用React/Redux，我試圖用異步將異步數據放入我的初始狀態。由於我習慣於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店beeing創建爲這樣：

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

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

對於異步加載數據，你需要派遣一個動作，即使它的初始狀態。如果您正在使用反應，那麼當您的最高順序組件已裝入時，可以對此進行響應

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。我想任何一個圖書館都是好的，只要你返回一個承諾。