清空 Redux 商店

Question

我有一个网络套接字，它接受一个名为 PushMessage 的对象并将其发送到 React 页面，该页面随后会实时更新。其工作方式是用户搜索他希望显示的 PushMessage，然后将其传入。但是，现在发生的情况是，如果用户搜索第一个 PushMessage，则会显示该 PushMessage，但如果他或然后她搜索另一个 PushMessage，它们都显示了。我只想显示其中的第二个。为了做到这一点，我觉得我需要清除 Redux 存储（return 到它的初始空状态）。但是，我不知道该怎么做。

我的 Reducer 由：

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 是伟大的，当你想把你的应用程序拆分成某种 "substates"，认为 redux 在这种情况下仍然是单一商店。现在你只有 pushMessages.

的单个子状态

我会使用该组件并设置一个操作来向它添加一条消息（也许最终会删除一条消息）。我正在使用 immutable.js 因为我碰巧喜欢使用它和 IMO 它使 redux 很好用，因为无论如何状态应该是不可变的（再次，个人意见）。

这是你的减速器：

 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] 
   }
}

因为您使用的是 combine reducer，所以您的容器应该订阅它的 pushMessages 子状态，所以在您的组件中您将拥有 this.props.messages 和您的消息数组。（如果你还没有订阅子状态，它只是 this.props.pushMessages.messages。要显示最后一个项目，你真正需要的是这样的东西（这是使用 lodash，你当然可以在 vanilla js 或任何你想要的东西中做到这一点)

 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 操作然后从该消息数组中弹出或拼接。（然后你可以只显示 this.props.message 而没有 _.last）。希望这对您有所帮助！

编辑：

以下是我将如何设置您的容器：

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 来绑定我的动作，因为它可以让你在你的动作创建者中调度，这使得异步非常容易。

正确连接组合代码后（我不知道在这里连接动作），您应该在 action.PushMessage 上用新消息触发 RECEIVED_PUSH_MESSAGE 动作创建者。然后连接到你的 mapStateToProps 更新你的组件 this.props.messages，它应该只呈现列表中的最后一项。

清空 Redux 商店

Clear Redux Store

reactjs

redux

react-redux