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

Question

我正在尝试从我的数据库中打印数据。使用钩子和没有钩子都做得很好，所以这次我尝试使用 redux 和钩子来实现 CRUD。但那是返回一个未定义的每次渲染。所以我调用了有效载荷，它是一个对象数组。我正在使用 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，所以应用程序的主要状态与汽车状态相同，正如 Viet 所回答的那样。

但是如果你需要汽车只是总状态的一部分，而你的总状态要有其他属性（例如 loginState），你必须为状态的每个部分创建一个 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);

Answer 2

我看到您使用carReducer 代替rootReducer。而carReducer 只有状态是一个数组。所以state 是一个空数组，state.cars 是未定义的。

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

const cars = useSelector(state => state);