Пожалуйста, отметьте Редактировать
Я пытаюсь реализовать саги в своем приложении.
Прямо сейчас я беру реквизитыдействительно плохим способом.Мое приложение состоит в основном из опроса данных из других источников.
В настоящее время мое приложение работает следующим образом:
У меня есть контейнеры , в которых есть mapStateToProps, mapDispatchToProps.
const mapStateToProps = state => {
return {
someState: state.someReducer.someReducerAction,
};
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({someAction, someOtherAction, ...}, dispatch)
};
const something = drizzleConnect(something, mapStateToProps, mapDispatchToProps);
export default something;
и затем у меня есть действия , например:
import * as someConstants from '../constants/someConstants';
export const someFunc = (someVal) => (dispatch) => {
someVal.methods.someMethod().call().then(res => {
dispatch({
type: someConstants.FETCH_SOMETHING,
payload: res
})
})
}
и редукторы , как показано ниже:
export default function someReducer(state = INITIAL_STATE, action) {
switch (action.type) {
case types.FETCH_SOMETHING:
return ({
...state,
someVar: action.payload
});
Я объединяю редукторы с redux's combReducers и экспортирую их как один редуктор, который затем импортирую в свой магазин.
Поскольку я использую морось, моя rootSaga выглядит так:
import { all, fork } from 'redux-saga/effects'
import { drizzleSagas } from 'drizzle'
export default function* root() {
yield all(
drizzleSagas.map(saga => fork(saga)),
)
}
Итак, теперь, когда я хочу обновить реквизит, внутри componentWillReceiveProps компонента, я делаю: this.props.someAction()
Хорошо, это работает, но я знаю, что это ненадлежащим образом.По сути, это худшее, что я мог сделать.
Итак, теперь я думаю, что мне следует сделать:
Создать отдельные саги, которые затем я импортирую в файл rootSaga.Эти саги будут опрашивать источники каждые предварительно определенное время и обновлять реквизит, если это необходимо.
Но моя проблема в том, как эти саги должны быть написаны.
Возможно ли, что вы можете дать мнепример, основанный на действиях, редукторах и контейнерах, о которых я упоминал выше?
Редактировать:
Мне удалось следовать указаниям apachuilo.
ИтакПока что я сделал следующие настройки:
Действия выглядят так:
export const someFunc = (payload, callback) => ({
type: someConstants.FETCH_SOMETHING_REQUEST,
payload,
callback
})
и редукторы , например:
export default function IdentityReducer(state = INITIAL_STATE, {type, payload}) {
switch (type) {
case types.FETCH_SOMETHING_SUCCESS:
return ({
...state,
something: payload,
});
...
Я также создал someSagas :
...variousImports
import * as apis from '../apis/someApi'
function* someHandler({ payload }) {
const response = yield call(apis.someFunc, payload)
response.data
? yield put({ type: types.FETCH_SOMETHING_SUCCESS, payload: response.data })
: yield put({ type: types.FETCH_SOMETHING_FAILURE })
}
export const someSaga = [
takeLatest(
types.FETCH_SOMETHING_REQUEST,
someHandler
)
]
, а затем обновил rootSaga :
import { someSaga } from './sagas/someSagas'
const otherSagas = [
...someSaga,
]
export default function* root() {
yield all([
drizzleSagas.map(saga => fork(saga)),
otherSagas
])
}
Также,API выглядит следующим образом:
export const someFunc = (payload) => {
payload.someFetching.then(res => {
return {data: res}
}) //returns 'data' of undefined but just "return {data: 'something'} returns that 'something'
Итак, я бы хотел обновить мои вопросы:
Мои API зависят отсостояние магазина.Как вы, наверное, поняли, я создаю приложение.Итак, Drizzle (промежуточное ПО, которое я использую для доступа к блокчейну), должно быть инициировано, прежде чем я вызову API и верну информацию компонентам.Таким образом,
a.Попытка чтения состояния с помощью getState () возвращает пустые контракты (контракты, которые еще не «готовы») - поэтому я не могу получить информацию - мне не нравится читать состояние из магазина, но ...
б.Передача состояния через компонент (this.props.someFunc (someState) возвращает мне Cannot read property 'data' of undefined Самое смешное, что я могу console.log состояния (кажется, все в порядке) и пытаясь просто `вернуть {data: 'someData'} реквизиты получают данные.
- Должен ли я запускать this.props.someFunc (), например, для componentWillMount ()? Это правильный способ обновления реквизитов?
Извините за очень длинный пост, но я хотел быть точным.
Правка для 1b : Э-э, так много правок :) Я решил проблему с помощьюнеопределенное разрешение.Просто нужно было написать API так:
export function someFunc(payload) {
return payload.someFetching.then(res => {
return ({ data: res })
})
}