Redux useSelect 没有按预期获取所有数据

Question

我正在尝试打印数据库中的数据。它通过使用钩子和不使用钩子都做得很好，所以这次我尝试使用 redux 和钩子来实现 CRUD。但那是 return 未定义的每次渲染。所以我调用了有效负载，它是一个对象数组。我正在使用 redux、中间件 Thunk 和钩子。请有人指导我解决问题。

下面是代码：

Component.jsx

import { retrieveCars } from '../action/cars.action'
    
     const cars = useSelector(state => state.cars);
        const dispatch = useDispatch();
      
        useEffect(() => {
          dispatch(retrieveCars());
          


        });
 <tbody>
                    {cars &&
                      cars.map((data) =>
                        <tr key={data.idCars}>
                       
                        <th scope="row">{data.idCars}</th>  
                      
                      <td>{data.carName}</td>
                      <td>{data.carModel}</td>
                      <td>
                      <Link to={"/classement/update/" + data.idCars}
                        className="btn btn-info"
                        >
                        Edit
                       </Link>
                
                      <button  className="btn btn-danger" onClick={() => deleteC(data.idCars)}>
                        Remove
                      </button>
                        </td> 
                     
                      
                     
                      </tr>
                    )
                    }
                      
                
                  </tbody>
        **cars.action.js**
export const retrieveCars = () => async (dispatch) => {
    try {
      const res = await DataService.getAll();
  
      dispatch({
        type: RETRIEVE_CARS,
        payload: res.data,
      });
    } catch (err) {
      console.log(err);
    }
  };

汽车减速器:

const initialState = [];
  
  function carReducer(cars = initialState, action) {

    const { type, payload } = action;
  
    switch (type) {    
      case RETRIEVE_CARS:


           return payload;
   default:
        return cars;
    }

Store.js

import rootReducer from '../reducers/carReducer';
const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

Answer 1

我看到您正在使用 carReducer 作为 rootReducer。而 carReducer 只有 state 是一个数组。所以 state 是一个空数组，而 state.cars 是未定义的。

只需像这样更新即可获得汽车：

const cars = useSelector(state => state);

Answer 2

所以因为你使用 carReducer 作为你商店的 rootReducer，应用程序的主要状态与 cars 状态相同，正如 Viet 回答的那样。

但是如果你需要cars只是total state的一部分，而你的total state有其他属性（例如loginState），你必须为state的每个部分创建一个reducer，然后创建一个rootReducer 与 combineReducer

假设您有两个状态的这两个减速器：

cars ====> carsReducer
login ===> loginReducer

然后

const rootReducer=combineReducers({cars:carsReducer,login:loginReducer})

现在，如果您想访问不同的状态部分：

const cars = useSelector(state => state.cars);
const login = useSelector(state => state.login);

Redux useSelect 没有按预期获取所有数据

Redux useSelect doesn't get all data as expected

reactjs

redux-thunk

react-redux

axios

react-hooks