Javascript Redux React应用程序中排序时出错

我在

pure-React

上写了一个应用程序，在那里我向服务器发出请求并获得响应-

类别列表

。当我点击标题表

id

时，我可以按

asc desc

对该列表进行排序。我需要将React应用程序的一小部分重新制作为Redux

但当我将此部分重新制作为

redux

时，出现了错误：

无法读取未定义的还原程序中的属性“sortAscDesc”。 第行的Table.js中也有错误：

dispatch（changeSortAscDesc（））}>ID{sortAscDesc}

首先，在我的问题中，我将编写代码，并将其重新制作为Redux 在下面的文章中，我将在pure React上写下我的应用程序的一小部分（在重拍到redux之前），并且运行良好

在REDUX上写道： filterList.js（操作）： filterList.js（减速器）： 表6.js：

导出默认值（道具）=>{
const sortAscDesc=useSelector（state=>state.filterListReducer.sortAscDesc）；
const dispatch=usedpatch（）；
返回(
dispatch（changeSortAscDesc（））}>ID{sortAscDesc}
标题
{props.dataAttribute.map（项=>(
{item.id}
{item.title}
))}
);}

_______________________________________________________ 写在纯React上（重拍到redux之前）： Home.js：

const Home=（）=>{
const[value，setValue]=useState({
列表类别：[]，
排序CDESC：“asc”，
});
//这里使用effect和fetch函数，但我不写它，因为它与我的问题无关
const changeSortAscDesc=（）=>{
设置值（（上一个）=>({
…上一页，
sortAscDesc:prev.sortAscDesc=='asc'？'desc'：'asc'
}));
}; 
返回(
);

表6.js：

导出默认值（道具）=>{
const sortAscDesc=useSelector（state=>state.filterListReducer.sortAscDesc）；
const dispatch=usedpatch（）；
返回(
ID{props.sortAscDesc}
标题
{props.dataAttribute.map（项=>(
{item.id}
{item.title}
))}
);}

您的操作没有分派任何有效负载-

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

你可以从行动中移除有效载荷-

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

---

错误：未在文件Table.js中定义“有效负载”未定义任何未定义的

，导入操作如下：

从“../../actions/filterList.js”导入{changeSortAscDesc}

@ewik我的意思是用您想要传递的内容替换有效负载。我之所以将其命名为有效负载是因为它有意义。我不明白我应该传递什么。请参阅《纯反应》（在重拍到redux之前）中的

中所述内容：

mymethod

changeSortAscDesc

在纯react上写的，我应该如何更改Table.js？你能告诉我如何将这种react函数重新生成redux吗？

const deleteСoupleСategory=（argDeleteCoupleCategory）=>{setValueB（{…valueB，numberCoupleIdDelete:[…valueB.numberCoupleIdDelete，argdeleteCollection]}；

和我的状态：

const[valueB，setValueB]=useState（{numberCoupleIdDelete:[]，}）；

和我的输入：

props.deleteСoupleСcategory（item.id）/>

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

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

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

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

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

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