时间戳

首页 > 解决方案 > 使用 React 和 Redux 显示数组的内容

reactjs - 使用 React 和 Redux 显示数组的内容

问题描述

我是 React 的新手，甚至是 Redux 的新手。我要做的就是将数组的内容输出到网页。我想维护 Redux 结构（单向数据流，reducers）。当我单击 Generate a New Array 按钮时，reducer 会生成一个数组并保存为状态。在我尝试使用 输出数组map时，我看到错误告诉我myarray.map is not a function。考虑到我从状态中拉出数组，我有点困惑，它应该被填充。

初始状态

const initialState = {
  array: [],
  algo: null,
  size: 30,
}

减速机

const arrayReducer = (state,action) => {
  if (action.type === GENERATE_NEW_ARRAY){
    let arr = [];
    let size = state.size;
    let limit = size*3;

    for(let i=0;i<size;++i){
      let num = Math.floor((Math.Random() * limit) + 1);
      arr.push(num);
    }

    return { array: arr };
  }
  return state || { array: [] };
};

const rootReducer = combineReducers({
  array: arrayReducer,
  algo: algoReducer,
  size: sizeReducer,
});

选择器

const getSize = state => state.size;

反应组件

function GenerateNewArray({ value, generateNewArray }){
  return(
    <div>
      <button onClick={() => generateNewArray(value)}>
        Generate a New Array
      </button>
    </div>
  )
}

const GenerateNewArrayConnected = connect(
  state => ({
    size: getSize(state)
  }),
  dispatch => ({
    generateNewArray: size => dispatch(generateNewArray(size))
  })
)(GenerateNewArray);

我希望数组出现在 Generate a New Array 按钮下方，但我希望它作为一个单独的实体（如果可能），因为它们最终将是两个单独的组件。显示数组的最佳方法是什么？

标签： reactjsreduxreact-redux

解决方案

假设为您的 rootReducer 定义了 initialState，您只需要返回数组 fromarrayReducer而不是{array: arr}

const arrayReducer = (state,action) => {
  if (action.type === GENERATE_NEW_ARRAY){
    let arr = [];
    let size = state.size;
    let limit = size*3;

    for(let i=0;i<size;++i){
      let num = Math.floor((Math.Random() * limit) + 1);
      arr.push(num);
    }

    return arr;
  }
  return state;
};

推荐阅读