从 Redux 状态中的数组中获取活动项

Question

我想用 React/Redux 应用创建草稿系统。

我的草稿存储在一个由 Redux 简化的数组中。我在 React 组件中渲染我的草稿。当我点击一个项目时，点击的项目应该被标记为活动并且草稿被加载。

问题是，我不知道如何以方便的方式从 Redux 状态获取当前活动数组项。

到目前为止我做了什么（缩小，没有容器等）：

import React from 'react';
import { createStore } from 'redux';

const drafts = (state = [{ title: '' }], action) => {
  switch (action.type) {
    case 'CREATE_NEW_DRAFT':
      return [{ title: '' }, ...state];

    case 'ACTIVATE_DRAFT':
      // This is where I need help

    case 'UPDATE_ACTIVE_DRAFT':
      // This is where I need help

    default:
      return state;
  }
});

const store = createStore(drafts);

const drafts = store.getState().drafts;
const draft = drafts[0]; // Maybe something like this? Looks ugly to me

const createDraft = () => store.dispatch({
  type: 'CREATE_NEW_DRAFT',
});

const activateDraft = draft => (e) => {
  e.preventDefault();

  store.dispatch({
    draft,
    type: 'ACTIVATE_DRAFT',
  });
};

const updateDraft = e => store.dispatch({
  title: e.target.value,
  type: 'UPDATE_ACTIVE_DRAFT',
});

export default () => (
  <div>
    <ul>
      {drafts.map((element, i) => (
        <li key={i}>
          <a onClick={activateDraft(element)}>element.title</a>
        </li>
      ))}
    </ul>
    <button type="button" onClick={createDraft}>Create</button>
    <input type="text" value={draft.title} onChange={updateDraft} />
  </div>
);

那么，我怎么知道哪个项目是活跃的？我如何 "activate" 一个项目？一种解决方案是状态中的 "active" 指针，但处理起来感觉不是很舒服。

谢谢！

Answer 1

我终于找到了这个问题的答案。我将 activeDraft 指针存储在附加状态属性中，以便我可以通过 state.drafts[state.active].

获取 activeDraft

我用我的减速器中的这个案例更新了活动草稿：

case 'UPDATE_DRAFT':
  return [
    ...state.slice(0, action.active),
    Object.assign({}, state[action.active], action.draft),
    ...state.slice(action.active + 1),
  ];

action.active 是我传递给组件的新状态属性：

<input type="text" onChange={updateDraft(state.active)} />

激活草稿的方式相同。

感谢abhirathore2006！

从 Redux 状态中的数组中获取活动项

Get active item from an array inside the Redux state

immutability

redux

react-redux