发送操作时，我的减速器中的状态没有改变

Question

我无法在减速器中检索 state

我的组件看起来像这样

const MyComponent = ({name, features, onClick}) => {
  return (
        <div>
            Hello! {name}
            <Button onClick={() => { onClick(features); }}> Weight</Button>
        </div>
    );

const mapDispatchToProps = (dispatch: any) => {
  return {
    onClick: (features) => {
        dispatch(weightSort(features));
    }
  };
};
const mapStateToProps = (state: any, ownProps: any) => {
  console.log(state); //Displays the state
  return {
    name: "John Doe",
    features: ownProps.features,
  };
};

export const FeatureBlock = connect(mapStateToProps, mapDispatchToProps)(MyComponent);

我的操作和 reducers 如下所示：

// Action Creator
export const  weightSort = (features) => {
console.log("inside the weight sort action creator!!!");
  return {
    type: "SET_WEIGHT_FILTER",
    filter: "DESC",
    features,
  };
};

// Reducer
export const weightFilter = (state = [], action) => {
  switch (action.type) {
    case "SET_WEIGHT_FILTER":
        console.log(state); // Gives me empty state
        console.log("++inside weight filter+++++", action); //Displays action
        return state;
    default:
        return state;
  }
};


export const FeatureBlock = connect(
  mapStateToProps,
  mapDispatchToProps,
)(MyComponent);

我在这里错过了什么？任何帮助将不胜感激！

Answer 1

在你的reducer中，当你console.log(state)时，返回一个空数组是正确的，因为你没有做任何修改它。

// Reducer
   export const weightFilter = (state = [1,2,3], action) => {
     switch (action.type) {
       case "SET_WEIGHT_FILTER":
           console.log(state); // This will show [1,2,3] because [1,2,3] is the initial state.
           console.log("++inside weight filter+++++", action); //Displays action
           return state;
       default:
           return state;
     }
   };

我的猜测是你想要这样的减速器：

// Action Creator
export const  weightSort = (name, features) => {
console.log("inside the weight sort action creator!!!");
  return {
    type: "SET_WEIGHT_FILTER",
    name,
    features,
  };
};
// Reducer
  export const weightFilter = (
    state = {
      name: '',
      features: [],
    },
    action
  ) => {
     switch (action.type) {
       case "SET_WEIGHT_FILTER":
           return {...state, name: action.name, features: action.features}
       default:
           return state;
     }
   };

然后在您的 mapStateToProps 中，您将像这样绘制属性：

const mapStateToProps = (state: any, ownProps: any) => {
  console.log(state); //Displays the state
  return {
    name: state.weightFilter.name,
    features: state.weightFilter.features,
  };
};

你的按钮将有一个名称属性传递给函数，如下所示：

<Button onClick={() => { onClick(name, features); }}> Weight</Button>

如果您想对数据进行排序，可以在 reducer 或容器内进行。我更喜欢在容器中进行，喜欢使用 lodash sortBy 函数。它是这样工作的：

import { sortBy } from 'lodash' //be sure to npm install lodash if you use this utility
...
...
function mapStateToProps(state) {
  return {
    name: state.weightFilter.name,
    features: sortBy(features, ['nameOfPropertyToSortBy'])
  };
}

这是关于 sortBy 的 lodash 文档：https://lodash.com/docs/4.17.4#sortBy

希望对您有所帮助！

发送操作时，我的减速器中的状态没有改变

State does not change in my reducer when action is dispatched

redux

react-redux