Как мне использовать redux-thunk для асинхронного начального состояния? (реакция/восстановление)

Этот вопрос уже задавали несколько раз, однако я не совсем понял ответы, которые нашел. Используя 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, но у меня ничего не получается...

Не уверен, что мой вопрос ясен, было бы здорово помочь, чтобы облегчить все это.

Спасибо.


reactjs redux redux-thunk
person Simon Breton    schedule 11.08.2016    source источник

Ответы (1)


arrow_upward
11
arrow_downward

Ваш вопрос не очень ясен, но я постараюсь ответить как можно лучше. Redux-thunk — это промежуточное ПО, которое вы используете для отправки асинхронных действий. Вы инициализируете его, когда хранилище избыточности создается как таковое:

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. Я думаю, любая библиотека хороша, если вы возвращаете обещание.

person Max Moeschinger    schedule 12.08.2016
comment
Когда я добавляю { fetchTodos: fetchTodos } в свой connect, у меня возникает следующая ошибка finalMergeProps is not a function - person Simon Breton; 13.08.2016
comment
fetchTodos должно быть действием, которое вы импортируете. { fetchTodos: fetchTodos } в соединении - это просто способ сопоставления действия с реквизитом, чтобы вы могли вызывать его как this.props.fetchTodos в своем компоненте. - person Max Moeschinger; 13.08.2016
comment
да, я импортировал его. Нужно ли мне что-то делать с моими редукторами? и когда вы говорите обещание, что вы имеете в виду? еще раз спасибо ! - person Simon Breton; 13.08.2016
comment
Promise используется для возврата данных из асинхронных действий. Я думаю, вам следует прочитать документ Redux, потому что там много информации и некоторые хорошие примеры. - person Max Moeschinger; 13.08.2016