Reactjs 如何在Redux Reducer中保持前一状态并向前一状态添加新状态？_Reactjs_Redux

Reactjs 如何在Redux Reducer中保持前一状态并向前一状态添加新状态？

reactjs redux

Reactjs 如何在Redux Reducer中保持前一状态并向前一状态添加新状态？,reactjs,redux,Reactjs,Redux,下面是我的一个减速机。在函数applysetrandomiges中，我想访问randomiges的先前状态，以在先前状态中添加一个新的randomiges 我该怎么做？Redux中的reducer函数是否为此提供了一些回调函数？或者我应该自己实施 // ACTIONS const SET_RANDOM_IMAGES = "SET_RANDOM_IMAGES"; // ACTION CREATORS function setRandomImages(randomImages) { retur

下面是我的一个减速机。在函数

applysetrandomiges

中，我想访问

randomiges

的先前状态，以在先前状态中添加一个新的

randomiges

我该怎么做？Redux中的reducer函数是否为此提供了一些回调函数？或者我应该自己实施

// ACTIONS
const SET_RANDOM_IMAGES = "SET_RANDOM_IMAGES";

// ACTION CREATORS
function setRandomImages(randomImages) {
  return {
    type: SET_RANDOM_IMAGES,
    randomImages
  };
}

// API ACTIONS
function getRandomImages(page) {
  return (dispatch, getState) => {
    fetch(`/boutiques/random-images/?page=${page}`)
      .then(response => response.json())
      .then(json => dispatch(setRandomImages(json.results)))
      .catch(err => console.log(err));
  };
}

// INITIAL STATE
const initialState = {};

// REDUCER
function reducer(state = initialState, action) {
  switch (action.type) {
    case SET_RANDOM_IMAGES:
      return applySetRandomImages(state, action);
    default:
      return state;
  }
}

// REDUCER FUNCTIONS
function applySetRandomImages(state, action) {
  const { randomImages } = action;
  return {
    ...state,
    randomImages    <--- I need to merge the randomImages with a new state of randomImages
  };
}

// EXPORTS
const actionCreators = {
  getRandomImages,
};
export { actionCreators };

// DEFAULT REDUCER EXPORTS
export default reducer;

//操作
const SET_RANDOM_IMAGES=“SET_RANDOM_IMAGES”；
//动作创造者
函数setRandomImages（随机图像）{
返回{
类型：设置\u随机\u图像，
随机图像
};
}
//API操作
函数getRandomImages（第页）{
返回（调度，获取状态）=>{
获取（`/finites/random images/？page=${page}`）
.then（response=>response.json（））
.then（json=>dispatch（setRandomImages（json.results）））
.catch（err=>console.log（err））；
};
}
//初始状态
常量initialState={}；
//减速器
函数缩减器（状态=初始状态，动作）{
开关（动作类型）{
案例集\u随机\u图像：
返回ApplySetrandImages（状态、操作）；
违约：
返回状态；
}
}
//减速器功能
函数ApplySetrandImages（状态、操作）{
const{randomImages}=动作；
返回{
……国家，
随机图像将操作
、还原器
和类型
分离到各自的文件夹中
类型/index.js
export const SET_RANDOM_IMAGES = "SET_RANDOM_IMAGES";

import * as types from '../types';

export const getRandomImages = page => dispatch => (
  fetch(`/boutiques/random-images/?page=${page}`)
    .then(response => response.json())
    .then(json => dispatch({ type: types.SET_RANDOM_IMAGES, payload: json.results })))
    .catch(err => console.log(err))
)

import * as types from '../types'

// overwrite images for each successful fetch request
const imageReducer(state={}, {type, payload}) {
  switch (type) {
    // spread out any previous state, then spread out the payload (json.results)
    case types.SET_RANDOM_IMAGES: return { ...state, ...payload }
    default: return state;
  }
}

// or append images on each successful fetch request...
const imageReducer(state={}, {type, payload}) {
  switch (type) {
    case types.SET_RANDOM_IMAGES: 
      return { 
        ...state,  // spread out any previous state
        collection: [ 
          ...state.collection, //  then spread out any previous "collection" state, 
          ...payload // then spread/append the payload (json.results) 
        ]
      }
    default: return state;
  }
}

export default combineReducers({
  images: imageReducer
});

actions/imageActions.js
export const SET_RANDOM_IMAGES = "SET_RANDOM_IMAGES";

import * as types from '../types';

export const getRandomImages = page => dispatch => (
  fetch(`/boutiques/random-images/?page=${page}`)
    .then(response => response.json())
    .then(json => dispatch({ type: types.SET_RANDOM_IMAGES, payload: json.results })))
    .catch(err => console.log(err))
)

import * as types from '../types'

// overwrite images for each successful fetch request
const imageReducer(state={}, {type, payload}) {
  switch (type) {
    // spread out any previous state, then spread out the payload (json.results)
    case types.SET_RANDOM_IMAGES: return { ...state, ...payload }
    default: return state;
  }
}

// or append images on each successful fetch request...
const imageReducer(state={}, {type, payload}) {
  switch (type) {
    case types.SET_RANDOM_IMAGES: 
      return { 
        ...state,  // spread out any previous state
        collection: [ 
          ...state.collection, //  then spread out any previous "collection" state, 
          ...payload // then spread/append the payload (json.results) 
        ]
      }
    default: return state;
  }
}

export default combineReducers({
  images: imageReducer
});

从组件内部，您将连接到redux状态（状态.images
或状态.images.collection
）和调度操作
（getRandomImages
）：
然后，还原程序将展开任何以前的imageReducer
状态，然后通过payload
将res.results
附加到它。现在它以state.images
或state.images.collection
的形式存在于redux中。然后从redux状态将其作为This.props.images
拉入上面的组件中r此.props.images.collection
将操作
、还原器
和类型
分离到各自的文件夹中
类型/index.js
export const SET_RANDOM_IMAGES = "SET_RANDOM_IMAGES";

import * as types from '../types';

export const getRandomImages = page => dispatch => (
  fetch(`/boutiques/random-images/?page=${page}`)
    .then(response => response.json())
    .then(json => dispatch({ type: types.SET_RANDOM_IMAGES, payload: json.results })))
    .catch(err => console.log(err))
)

import * as types from '../types'

// overwrite images for each successful fetch request
const imageReducer(state={}, {type, payload}) {
  switch (type) {
    // spread out any previous state, then spread out the payload (json.results)
    case types.SET_RANDOM_IMAGES: return { ...state, ...payload }
    default: return state;
  }
}

// or append images on each successful fetch request...
const imageReducer(state={}, {type, payload}) {
  switch (type) {
    case types.SET_RANDOM_IMAGES: 
      return { 
        ...state,  // spread out any previous state
        collection: [ 
          ...state.collection, //  then spread out any previous "collection" state, 
          ...payload // then spread/append the payload (json.results) 
        ]
      }
    default: return state;
  }
}

export default combineReducers({
  images: imageReducer
});

actions/imageActions.js
export const SET_RANDOM_IMAGES = "SET_RANDOM_IMAGES";

import * as types from '../types';

export const getRandomImages = page => dispatch => (
  fetch(`/boutiques/random-images/?page=${page}`)
    .then(response => response.json())
    .then(json => dispatch({ type: types.SET_RANDOM_IMAGES, payload: json.results })))
    .catch(err => console.log(err))
)

import * as types from '../types'

// overwrite images for each successful fetch request
const imageReducer(state={}, {type, payload}) {
  switch (type) {
    // spread out any previous state, then spread out the payload (json.results)
    case types.SET_RANDOM_IMAGES: return { ...state, ...payload }
    default: return state;
  }
}

// or append images on each successful fetch request...
const imageReducer(state={}, {type, payload}) {
  switch (type) {
    case types.SET_RANDOM_IMAGES: 
      return { 
        ...state,  // spread out any previous state
        collection: [ 
          ...state.collection, //  then spread out any previous "collection" state, 
          ...payload // then spread/append the payload (json.results) 
        ]
      }
    default: return state;
  }
}

export default combineReducers({
  images: imageReducer
});

从组件内部，您将连接到redux状态（状态.images
或状态.images.collection
）和调度操作
（getRandomImages
）：
然后，还原程序将展开任何以前的imageReducer
状态，然后通过payload
将res.results
附加到它。现在它以state.images
或state.images.collection
的形式存在于redux中。然后从redux状态将其作为This.props.images
拉入上面的组件中r此.props.images.collection
您可以通过将旧状态和新状态分散到新数组中来合并随机图像
：
function applySetRandomImages(state, action) {
  const { randomImages } = action;
  return {
    ...state,
    randomImages: [...state.randomImages, ...randomImages],
  };
}

通过将旧状态和新状态分散到新数组中，可以合并随机图像
：
function applySetRandomImages(state, action) {
  const { randomImages } = action;
  return {
    ...state,
    randomImages: [...state.randomImages, ...randomImages],
  };
}

我想访问randomImages的上一个状态，以添加具有上一个状态的randomImages的新状态
如果先前的状态为：
{
    a: 1,
    b: 2,
    c: 3
}

而
随机图像
是：
{
    d: 4,
    e: 5
}

然后返回的新状态将是
{
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5
}

我想访问randomImages的上一个状态，以添加具有上一个状态的randomImages的新状态
如果先前的状态为：
{
    a: 1,
    b: 2,
    c: 3
}

而
随机图像
是：
{
    d: 4,
    e: 5
}

然后返回的新状态将是
{
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5
}

因此，您的状态中有随机图像
，您想将其与您的操作附带的图像合并？是数组还是对象？是的，我想将即将出现的图像与现有图像合并。它是数组。因此，您的状态中有随机图像
，您想将其与您的操作附带的图像合并？是数组还是对象n对象？是的，我想将即将出现的一个与现有的一个合并。它是数组。这是我尝试过的，但当我控制台.log它时，它返回未定义。不要检查随机图像
一开始是否存在。谢谢！不客气。我修复了回答中的一个错误。我忘记传播新的随机图像
。这就是我尝试的d、 但是当我console.log它时，它返回UndefinedId一开始不检查是否存在randomImages
。谢谢！不客气。我修复了我回答中的一个错误。我忘了传播新的randomImages
。