在 Redux-React 应用程序中排序时出错

Question

I have app wrote on pure React where I make request to server and get response - category list . This list I can sort by asc-desc when I click by title table id .I needed to remake small part of my React app to Redux.

But when I remake this part to redux I have error:

Cannot read property 'sortAscDesc' of undefined - in reducer.

Also error in Table.js in line:

<th className="th-id" onClick={() => dispatch(changeSortAscDesc())}>ID <small>{sortAscDesc}</small></th>

First in my question I'll write code that I remake to Redux and below after _______________________________ I'll write small part my app which wrote on pure React(before remake to redux) and work well.

Wrote on REDUX:

filterList.js(action):

export const changeSortAscDesc = (prev) => ({
    type: "SORT_ASC_DESC",
    payload: prev
});

filterList.js(reducer):

const initialState = {
  sortAscDesc: "asc",
};

export function filterList(state = initialState, action) {
  switch (action.type) {
    case "SORT_ASC_DESC": {
      const { payload } = action;
      return {
        ...state,
        sortAscDesc: payload.sortAscDesc == 'asc' ? 'desc' : 'asc'
      };
    }
    default:
      return state;
  }
}

Table.js:

export default (props) => {
    
const sortAscDesc = useSelector(state => state.filterListReducer.sortAscDesc);
const dispatch = useDispatch();
    
 return (
  <table>
    <thead>
      <tr>
        <th></th>
        <th onClick={() => dispatch(changeSortAscDesc())}>ID <small>{sortAscDesc}</small></th>  
        <th>TITLE</th>
      </tr>
    </thead>
    <tbody className="table-body">
       {props.dataAttribute.map(item => (
        <tr key={item.id}>
          <td>{item.id} </td>
          <td>{item.title} </td>
        </tr>
      ))}
    </tbody>
  </table>
);}

_______________________________________________________

Wrote on pure React (before remake to redux):

Home.js:

const Home = () => {
    
const [value, setValue] = useState({
     listCategory: [],
     sortAscDesc: "asc",
});

// Here useEffect and fetch function, but I dont write it, because it not related with my question

 const changeSortAscDesc = () => {    
      setValue((prev) => ({
       ...prev,
       sortAscDesc: prev.sortAscDesc == 'asc' ? 'desc' : 'asc'
     }));
    }; 
return (
    <div>
   <Table dataAttribute={value.listCategory} 
             changeSortAscDesc={changeSortAscDesc} 
             sortAscDesc={value.sortAscDesc}   
      />
    </div>
);

Table.js:

export default (props) => {
    
const sortAscDesc = useSelector(state => state.filterListReducer.sortAscDesc);
const dispatch = useDispatch();
    
 return (
  <table>
    <thead>
      <tr>
        <th></th>
        <th onClick={props.changeSortAscDesc}>ID <small>{props.sortAscDesc}</small></th>  
        <th>TITLE</th>
      </tr>
    </thead>
    <tbody className="table-body">
       {props.dataAttribute.map(item => (
        <tr key={item.id}>
          <td>{item.id} </td>
          <td>{item.title} </td>
        </tr>
      ))}
    </tbody>
  </table>
);}

Answer 1

You are not dispatching any payload with your action -

<th onClick={() => dispatch(changeSortAscDesc(dataThatNeedsToBePassed))}>ID <small>{sortAscDesc}</small></th> //pass data as parameter

EDIT- You can make it work in this way -

const initialState = {
  sortAscDesc: "asc",
};

export function filterList(state = initialState, action) {
  switch (action.type) {
    case "SORT_ASC_DESC": {
      const { payload } = action; // no need //
      return {
        ...state,
        sortAscDesc: state.sortAscDesc == 'asc' ? 'desc' : 'asc'
      };
    }
    default:
      return state;
  }
}

And you can remove payload from your action -

export const changeSortAscDesc = () => ({
    type: "SORT_ASC_DESC",
    payload: prev// no need //
});