単純なCRUDアプリケーションのレデューサーをreduxで構造化する

Question

だから、React + Reduxを使用して、非常にシンプルなCRUDスタイルのアプリケーションをコアにしています。 APIを使って投稿を呼び出すことができます（私はそれらを呼び出すことができます）。そして、それらをリストすることができるようにしたいと思います。ユーザがそれをクリックすると、その投稿の詳細ページに移動します。

だから、私は減速機を持っています。もともと、私はredux現実世界の例から取ったアプローチを使い始めました。これは、インデックスリデューサを介してオブジェクトのキャッシュを維持し、 "get post"を実行するとキャッシュをチェックし、キャッシュがあればそれを返し、そうでなければ適切なAPI呼び出しを行います。コンポーネントがマウントされると、このキャッシュから物事を取得しようとします。存在しない場合は、それらが存在するまで待機します（falseを返します）。

これはうまくいきましたが、いろいろな理由から、この非キャッシングを行う必要があります。つまり、/ posts /：postIdページを読み込むたびにAPI経由で投稿する必要があります。

私は非控除の世界では、単にcomponentDidMountでfetch（）を実行し、次にそれに対してsetState（）を実行することを認識しています。しかし、私はアプリケーションの他の部分がそれらのポストを変更するアクションを呼び出すかもしれないので（例えば、ウェブソケットまたは複雑なレシックスに接続されたコンポーネント）、減速機に格納された投稿を望みます。私は、人々が使用見てきた

一つのアプローチは、次の例のように、彼らの減速で「アクティブ」の項目である。この一方でhttps://github.com/rajaraodv/react-redux-blog/blob/master/public/src/reducers/reducer_posts.js

はOKですが、それは、アクティブなポストをロードし、各コンポーネントがcomponentWillUnmountを持たなければならないことを必要アクティブな投稿をリセットするアクション（resetMe：https://github.com/rajaraodv/react-redux-blog/blob/master/public/src/containers/PostDetailsContainer.jsを参照）。それがアクティブな投稿をリセットしなかった場合、次の投稿が表示されている間、つぶれてしまいます（APIコールが行われている間は短時間点滅しますが、それでもいいとは限りません）。一般的に、投稿を見たいすべてのページにcomponentWillUnmountのresetMe（）を実行させることは悪臭のようになります。

だれでもアイデアがありますか、これについての良い例がありますか？そんな単純なケースのように思えますが、私は少し驚いています。それを行うにはどのように

Answer 1

はあなたの既存の減速に依存しますが、私はちょうど新しいもの

reducers/post.js

import { GET_ALL_POSTS } from './../actions/posts'; 

export default (state = { 
    posts: [] 
}, action) => { 
    switch (action.type) { 
    case GET_ALL_POSTS: 
     return Object.assign({}, state, { posts: action.posts }); 
    default: 
     return state; 
    } 
}; 

を作ってあげることだけにアクションを発射、理解することは非常に簡単ですすべてのあなたの記事を入手し、以前の投稿を還元人の新しい記事に置き換えてください。

使用componentDidMountGET_ALL_POSTSアクションを発射し、あなたがそれらを一つ一つ時間をリロードしないようにする場合にのみ部品マウント、もしポストがどこロードされたかどうかを知っている状態でブールフラグを使用します。

components/posts.jsx

import React from 'react'; 

export default class Posts extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     firstLoad: false 
    }; 
    } 

    componendDidMount() { 
    if (!this.state.firstLoad) { 
     this.props.onGetAll(); 
     this.setState({ 
      firstLoad: true 
     }); 
    } 
    } 

    // See how easy it is to refresh the lists of posts 
    refresh() { 
    this.props.onGetAll(); 
    } 

    render() { 
    ... 

    // Render your posts here 
    { this.props.posts.map(...) } 
    ... 
    } 
} 

私達はちょうどコンポーネントに投稿し、イベントを渡すための容器を逃している

containers/posts.js

import { connect } from 'react-redux'; 
import { getPosts } from './../actions/posts'; 
import Posts from './../components/posts.jsx'; 

export default connect(
    state => ({ posts: state.posts }), 
    dispatch => ({ onGetAll:() => dispatch(getPosts()) }) 
); 

これは非常に簡単ですパターンと私は多くのアプリケー

Answer 2

反応ルータを使用する場合は、onEnterフックを利用できます。