Как создавать временные переменные в redux?

Пользователь

от nicolette.stoltenberg , в категории: JavaScript , год назад

Как создавать временные переменные в redux?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от lamar , год назад

@nicolette.stoltenberg 

Redux не поддерживает создание временных переменных, поскольку это противоречит основной концепции библиотеки, которая направлена на создание предсказуемого однонаправленного потока данных.


Вместо этого, в Redux вы можете хранить данные в виде состояния (state) и изменять его через reducer функции. Для того, чтобы временно изменять состояние, можно использовать middleware, такой как redux-thunk или redux-saga.


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// action creator
export const fetchSomeData = () => async (dispatch) => {
  dispatch({ type: "FETCH_DATA_REQUEST" });
  const response = await fetch("https://some-api.com/data");
  const data = await response.json();
  dispatch({ type: "FETCH_DATA_SUCCESS", payload: data });
  // временная переменная
  const tempData = processData(data);
  // диспатчим другой экшен, чтобы изменить состояние
  dispatch({ type: "UPDATE_TEMP_DATA", payload: tempData });
};

// reducer
const initialState = {
  data: null,
  tempData: null,
};

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case "FETCH_DATA_SUCCESS":
      return {
        ...state,
        data: action.payload,
      };
    case "UPDATE_TEMP_DATA":
      return {
        ...state,
        tempData: action.payload,
      };
    default:
      return state;
  }
};


Redux-saga позволяет создавать комплексные саги, которые могут обрабатывать асинхронные операции и выполнять различные действия, включая изменение состояния. Вот пример использования redux-saga для создания временной переменной:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { call, put, takeLatest } from "redux-saga/effects";

// saga
function* fetchDataSaga() {
  try {
    const response = yield call(fetch, "https://some-api.com/data");
    const data = yield call([response, "json"]);
    yield put({ type: "FETCH_DATA_SUCCESS", payload: data });
    // временная переменная
    const tempData = yield call(processData, data);
    // диспатчим другой экшен, чтобы изменить состояние
    yield put({ type: "UPDATE_TEMP_DATA", payload: tempData });
  } catch (error) {
    yield put({ type: "FETCH_DATA_FAILURE", error });
  }
}

// watcher saga
export function* watchFetchData() {
  yield takeLatest("FETCH_DATA_REQUEST", fetchDataSaga);
}

// reducer
const initialState = {
  data: null,
  tempData: null,
};

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case "FETCH_DATA_SUCCESS":
      return {
        ...state,
        data: action.payload,
      };
    case "UPDATE_TEMP_DATA":
      return {
        ...state,
       


Пользователь

от kenya , 2 месяца назад

@nicolette.stoltenberg 

1
2
3
4
    tempData: action.payload,
  };
default:
  return state;


} };


Обратите внимание, что в обоих примерах временная переменная создается и используется внутри middleware (redux-thunk или redux-saga) для обработки асинхронных операций и обновления состояния Redux.