Async Initial状態に "redux-thunk"を使用する方法はありますか？ （反応/還元）

Question

この質問はすでに何度か尋ねられていますが、私が見つけた答えは本当に理解できませんでした。 React/Reduxを使って、非同期データをexpressで初期状態にしようとしています。私はd3に慣れていたので、私の選択肢の1つは "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は、非同期アクションをディスパッチするために使用するミドルウェアです。

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

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

非同期データをロードするためにあなたはそれが初期状態のためだ場合でも、アクションをディスパッチする必要があります。Reduxの店のような作成beeingているときあなたはそれを初期化します。あなたが反応を使用している場合は、あなたの最上位のコンポーネントがマウントされているときこれにすることができます。

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); 

これはあなたが、私はD3が、fetchを使用していない見ることができるように、この

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

のようになります。アクションをトリガーします。あなたが約束を返す限り、どんな図書館も良いと思います。