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>
);

那么，我怎么知道哪个项目是活动的？如何“激活”项目？一种解决方案是状态中的“活动”指针，但处理起来感觉不太舒服。

谢谢！

Answer 1

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

我在reducer中用这个案例更新了活动草稿：

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状态内的数组中获取活动项

1 个答案: