государство не меняется в моем редукторе, когда действие отправляется

Question

Я не в состоянии восстановить state в редукторе

MyComponent выглядит следующим образом

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); 

Мои действия и восстановителей выглядит следующим образом:

// 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

В вашем редукторе, когда вы 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, 
    }; 
}; 

и ваш кнопка будет иметь имя prop, переданное в функцию следующим образом:

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

Если вы хотите отсортировать данные, вы можете сделать это либо в редукторе, либо внутри контейнера. Я предпочитаю делать это в контейнере и люблю использовать функцию 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']) 
    }; 
} 

Вот документация lodash на SortBy: https://lodash.com/docs/4.17.4#sortBy

Надежда, что помогает!