Async Initial 상태에 "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는 비동기 작업을 디스패치하는 데 사용하는 미들웨어입니다.

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

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

로드 비동기 데이터의 당신이 초기 상태에 대한 경우에도 작업을 파견해야합니다 다음 REDUX 저장소가 같은 생성에 beeing 때 당신은 그것을 초기화합니다. 당신이 반응을 사용하고 있다면 당신은 당신의 최고 주문 구성 요소가 장착되었을 때 이것을 할 수 있습니다. 당신은 내가 D3하지만 fetch을 사용하지 않은 볼 수 있듯이

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

처럼 보일 수있는 조치를 트리거합니다. Promise를 반환하는 한 어떤 라이브러리도 좋습니다.