Clear Redux Store

Question

私は、PushMessageと呼ばれるオブジェクトを受け入れ、それをリアルタイムで更新するReactページに送るWebソケットを持っています。これが動作する方法は、ユーザが表示したいPushMessageを検索し、次にこれを渡すことです。しかし、今のところ、最初のPushMessageを検索すると、そのPushMessageが表示されますが、その後、別のPushMessageを検索し、両方が表示されます。私は2番目のものだけを表示したいと思います。これを行うために、私はReduxストアをクリアする必要があるように感じます（最初の空の状態に戻してください）。しかし、私はこれを行う方法を理解することはできません。私が持っているコンポーネントでは

var Redux = require('redux'); 
var _ = require('lodash'); 

var pushNotificationDefaultState = {}; 


var pushMessageReducer = function(state, action) { 
    switch(action.type) { 
     case 'RECEIVED_PUSH_MESSAGE': 
      var obj = JSON.parse(action.PushMessage); 
      return _.assign({}, state, obj); 
     default: 
      if (typeof state === 'undefined') { 
       return pushNotificationDefaultState; 
      } 

      return state; 
    } 
}; 

module.exports = Redux.combineReducers({ 
    pushMessages: pushMessageReducer 
}); 

：

私のレデューサーは次式で与えられ

function mapStateToProps(state) { 
    return state; 
} 


var AppContainer = connect(
    mapStateToProps, 
    null 
)(App); 

任意およびすべてのヘルプは感謝されるだろう。前もって感謝します。

Answer 1

これはさまざまな方法で実現できますが、どのようにアプローチすればよいか教えてください。のは、右のバットを離れてあなたの状態を見てみましょう - あなたが使用しているので、あなたがそのようなあなたの状態を分割しているレデューサーを組み合わせる：あなたは「サブ状態」のようなものにあなたのアプリを分割したいとき

{ 
    pushMessages: { pushMessages state in here } 
} 

のでcombineReducersは素晴らしいですが、考えreduxはこのインスタンスではまだ単一のストアです。今のところ、pushMessagesの単一のサブ状態があります。

私はコンポーネントを取り上げて、それにメッセージを追加するアクションを設定します（最終的にはメッセージを削除するアクション）。私はimmutable.jsを使用しています。私はIMOと一緒に仕事をすることが好きです。IMOは、状態が不変でなければならないので、仕事をするのがいいです。だからここ

はあなたのレデューサーは以下のとおりです。

var pushMessageReducer = function(state = immutable.Map(), action) { 
    if (action && action.type) { 
     switch (action.type) { 

      case actions. RECEIVED_PUSH_MESSAGE: 
       return state.update('messages', immutable.List(), 
        (oldMessages) => oldMessages.push(action.PushMessage) 
       ); 


      default: 
       return state; 
     } 
    } 
    return state; 
} 

それでは、これがそうのようにあなたの状態を設定されているん：

{ 
    pushMessages: { 
     messages: [ ... all your messages pushed in here] 
    } 
} 

あなたが組み合わせを使用しているのでことはあなたのコンテナがそれのサブ状態に加入する必要がありますリデューサーあなたのコンポーネントにはメッセージの配列を持つthis.props.messagesがあります。 （サブステートを購読していない場合はthis.props.pushMessages.messagesです。最後のアイテムを表示するには、このようなものが必要です（これはロダッシュを使用しています）。

constructor(props) { 
    super(props); 
    this.getLastMessage = this.getLastMessage.bind(this); 
}  

    getLastMessage() { 
     return _.last(this.props.messages); 
    } 

    render() { 

    return(
     <div> 
      Last Message : {this.getLastMessage()) 
     </div> 
    ); 
    } 

リストにはすべてが含まれていて、最後のものだけが表示されることはありませんが（正確なビジネスロジックがわかりません）、簡単にREMOVE_PUSH_MESSAGEアクションを追加してポップまたはスプライス（そして、_.lastなしでthis.props.messageを表示するだけでよい）。

編集：

ここでは、私はあなたのコンテナを設定する方法を示します。

import immutable from 'immutable'; 
import { connect } from 'react-redux'; 
import Component from './component'; 
import * as actionCreators from './action-creators'; 

function mapStateToProps(state) { 
    const normalizedState = state.get('pushMessageReducer', immutable.Map()).toJS(); 

    return { 
     messages: normalizedState.messages 
    }; 
} 

function mapDispatchToProps(dispatch, ownProps) { 
    return { 
     myAction: actionCreators.myAction.bind(null, dispatch) 
    }; 
} 


export default function(component = Component) { 
    return connect(mapStateToProps, mapDispatchToProps)(component); 
} 

アプリがない限り、私は、私はこのコンテナで使用する状態の部分をつかむためにこれを使用、mapStateToPropsでnormalizedStateに気付くでしょうスマートコンポーネントが1つしかない場合、おそらくこれは行いません。これは、私がこのコンテナで使用している状態の部分（不変から）を取得します。あなたのケースでは、それはpushMessagesです。今接続したこのコンポーネントでは、あなたの商品にthis.props.messagesがあるはずです。私はmapDispatchToPropsを使って自分のアクションをバインドします。なぜなら、アクションクリエイターにディスパッチできるからです。

結合コードが適切に接続されている（私はここでアクションを実行することがわかりませんでした）、RECEIVED_PUSH_MESSAGEアクション作成者に新しいメッセージaction.PushMessageを発射する必要があります。これは、コンポーネントのthis.props.messagesを更新するmapStateToPropsに接続します。これは、リスト内の最後の項目のみをレンダリングする必要があります。