在组件外部反应本机 redux 调度不会触发 componentWillReceiveProps

Question

我在 React 组件之外进行了调度 myActions.js:

import {SET_ORDER} from "./defaultActions";
import store from "../store";

const setOrder           = value => ({type: SET_ORDER,value});

export const addToOrder         = (item,type)=>{
    let order   = store.getState().order;//get object from store
    order[type].push(JSON.parse(JSON.stringify(item)));//clone new object to push on order array
    store.dispatch(setOrder(order));//dispatch new order object
};

在我的组件中，我将收到道具：

import {connect} from "react-redux";
import {addToOrder} from "myActions.js";
class Drinks extends Component{
   componentDidMount(){
     this.someAction();//trigger update order
   }
   someAction(){
     addToOrder({something},'type');
   }

   componentWillReceiveProps(props){
     //not works
     //expect props.order but never appears
   }
}

const stateToProps      = ({order}) => ({order});
const dispatchToProps   = null; //not dispatch here


const conn = connect(stateToProps,dispatchToProps);

export default conn(Drinks);

商店已更新，但从未调用过 componentWillReceiveProps，我需要怎么做才能正确接收道具？

我的包 redux 库是："react-redux": "^5.0.7","redux": "^3.7.2", "redux-thunk": "^2.3.0" 我的存储在组件之间工作正常，只有当我尝试在反应组件之外调度时才会失败。

Answer 1

您并没有真正克隆对象（仅克隆项目），因此您正在以可变方式更新状态，这就是为什么从不调用 componentWillReceiveProps() 的原因。您的订单变量仍然指向 redux 商店中的订单。试试这个：

export const addToOrder = (item,type) => {
    let order   = {...store.getState().order}; //get cloned order object from store
    order[type].push(item); // push new object to cloned object
    store.dispatch(setOrder(order)); //dispatch new order object
};

在组件外部反应本机 redux 调度不会触发 componentWillReceiveProps

react native redux dispatch outside component is not trigger componentWillReceiveProps

reactjs

react-native

redux

redux-thunk