6

私はかなり新しく、react と redux を使用して簡単なブックマーク アプリケーションを構築しようとしています。

この問題について頭を回転させることはできません:

ユーザーは1 つのブックマークを作成して、複数のフォルダに追加できます。そのため、アクションをディスパッチし、addMark(bookmark)その後、addMark(folder)またはeditFolder(folder)フォルダーが既に存在する場合。ご覧のとおり、ブックマークとフォルダーは同じアクションで追加されます。これは、私のステート ツリーでは、どちらも単なるマークであり、type プロパティによって区別されるためです。

私の問題：ブックマークのフォルダリストに追加する新しいブックマークであるフォルダオブジェクトをどのように伝えることができますか? 2 つのディスパッチの間に新しく作成されたブックマークの ID を取得するにはどうすればよいですか?

満足できない解決策：

  1. レデューサーでブックマーク ID が (既存のブックマーク ID を介して) 生成される方法を知っているMath.maxので、2 つのディスパッチ間で新しいブックマーク ID を再現できます。これは悪いハックのように思えます。
  2. ブックマークとフォルダーは同じ状態ブランチ (同じレデューサー) に保持されます。どちらも単なる「マーク」であるため、最後に追加されたブックマークを参照する状態プロパティを持つことができますが、これも悪いハックのように思えます。

私が持っているものを理解するための少しのソースコード:

// mapping between dispatcher and props to my react view
const mapDispatchToProps = (dispatch) => ({
  saveMark: (mark) => {
    if (mark.id) {
      dispatch(editMark(mark));
    } else {
      dispatch(addMark(mark));
    }
  },
});
export default connect(mapStateToProps, mapDispatchToProps)(AddMark);

そして、コンテナー コンポーネントである AddMark 内:

// save the bookmark first
this.props.saveMark({
      type: 'bookmark',
      title: this.state.title,
      url: this.state.url,
      icon: this.props.icon,
      style: this.state.style,
 });
 // now I need the bookmark ID
 folders.forEach(folder => {
    folder.children.push(bookmarkID) // <-- !!!
 });
 folders.forEach(folder => this.props.saveMark(folder));

これに対する満足のいく解決策が見つかりません。

4

2 に答える 2

3

addBookmark()ここでは、ブックマーク オブジェクトとフォルダの両方を受け入れるアクションを 1 つだけディスパッチする必要があると思います。

ブックマーク オブジェクトのフォルダーへの追加を処理するコードは、リデューサーの一部である必要があります。

また、Redux プロジェクトのTodos の例も参照してください。コンポーネントで読み取ることができるように、アクションの作成で id が提供されます。現在の状態を使用して最新の ID を計算することもできます。

function addBookmark(bookmark, folder) {
   return (dispatch, getState) => {
       const newBookmark = Object.assign({
         id: Math.max(0, ...getState().bookmarks.map(b => b.id)) + 1,
       }, bookmark);
       dispatch({
         type: 'ADD_BOOKMARK',
         bookmark: newBookmark,
         folder: folder
       });
   }
}

この例では、これらのアクションをディスパッチするためにredux-thunkミドルウェアが必要であることに注意してください。

次に、フォルダーレデューサーでIDを使用してブックマークにアクセスできます

function folderReducer(state = [], action) {
  if(action.type === 'ADD_BOOKMARK') {
     return state.map(folder => {
       if(folder === action.folder) {
         return Object.assign({}, folder, {children: [...folder.children, action.bookmark.id]}
       }
       return folder;
     })
  }
  //another reducer code
  return state;
}
于 2016-06-07T13:47:45.383 に答える
0

レデューサーは、ストアのインスタンスを操作しているだけです。getState()を使用して、状態の現在のスナップショットを取得できます。

于 2016-06-06T18:07:18.223 に答える