Крючки и Redux Saga - PullRequest
Новая
       13

Крючки и Redux Saga

0 голосов
/ 07 мая 2019

Я изучаю редукционные крючки и задаюсь вопросом, как их использовать вместе с сагой на редуксе.

В настоящее время код, написанный в саге, выглядит следующим образом.

centers.js 

componentDidMount() {
    this.props.getCenters();
  }

...

<tbody>
                            {
                              this.props.centers ?
                                <React.Fragment>
                                  {
                                    centers.map((center, index) =>
                                      <tr key={index}>
                                        <td>{center.name}</td>
                                        <td>{center.zip}</td>
                                      </tr>
                                    )
                                  }
                                </React.Fragment>
                              :
                                <tr>
                                  <td> No data available</td>
                                </tr>

                            }
                          </tbody>

Файл действий определяется следующим образом. 

export const getCenters = () => ({
  type: types.CENTERS_REQUEST,
});

Файл саги определяется следующим образом. 

import { DEFAULT_ERROR_MSG } from '../../constants';
import { instance as centerProvider } from '../services/centerProvider';

function* fetchCenters() {
  try {
    const response = yield call(centerProvider.getCenters);
    const centers = response.data.data.centers;

    // dispatch a success action to the store
    yield put({ type: types.CENTERS_SUCCESS, centers});

  } catch (error) {
    // dispatch a failure action to the store with the error
    yield put(DEFAULT_ERROR_MSG);
  }
}

export function* watchCenterRequest() {
  yield takeLatest(types.CENTERS_REQUEST, fetchCenters);
}

export default function* centerSaga() {
  yield all([
    watchCenterRequest()
  ]);
}

Итак, вопрос в том,

  • Нужен ли нам по-прежнему редукс, если мы используем хуки?
  • Как мы можем переписать приведенный выше код с помощью хуков?

1 Ответ

1 голос
/ 07 мая 2019
  1. «Нужен ли нам по-прежнему редукс, если мы используем хуки?»

Вы можете использовать useReducer крюк вместо приставки, если хотите. Но если у вас есть общее состояние между различными компонентами, которые глубоко вложены в разные ветви дерева DOM, реализация с useReducer может быть немного сложнее. Так что использование приставок и саг не противоречит хукам. Крючки просто необходимы, если предпочитаете функциональные компоненты классовым компонентам.

  1. «Как мы можем переписать приведенный выше код с помощью хуков?»

Вы можете переделать свой компонент класса Centers, чтобы он функционировал следующим образом: 

function Centers(props) {
    useEffect(() => {
        props.getCenters();
    }, []);

    return (
        //render what you need here
    );
}
...