javascript - redux 存储中的状态发生变化但组件在 View 中没有变化

Question

我正在尝试通过制作一个简单的产品列表页面来学习 react-redux，我在 chrome 中使用了 redux dev 工具，商店中的状态会正确更改，但是当状态更改时我的产品列表组件没有重新呈现。下面是我的代码在我的商店/index.js 中

import rootReducer from "../reducers/productsReducer";
import { createStore, applyMiddleware,compose } from "redux";
import thunk from "redux-thunk";
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
export const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)));

在我的 index.js 中

import { store } from "./store";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

在我的 App.js 中

function App() { 
  return (
    <div className='App'>
      {/* <ProductList /> */}
      <Search />
      <Dropdown />
      <ProductList />
    </div>
  );
}

export default App;

我的 rootReducer 用于排序

const initialState = [];
const fetchProduct = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_PRODUCT:
      // console.log("fetchproduct is activated", action.payload);
      return action.payload;
    case SET_SORT:
      const selectedSort = action.payload.sort;
      console.log(state)
      const newState = { ...state ,products :
        (selectedSort == SORT_FILTER.PRICE_HIGH_TO_LOW)
          ? state.products.sort((a, b) => b.displayPrice - a.displayPrice)
          : state.products.sort((a, b) => a.displayPrice - b.displayPrice)};
      console.log(newState.products);
      return newState.products;

    default:
      return state;
  }
};

const rootReducer = (state, action) => {
  return {
    products: fetchProduct(state, action),
  };
};

export default rootReducer;

我的用于选择排序类型的下拉组件

const Dropdown = (props) => {

  const updateSortByFilter = (e) => {
    props.setSort(e.target.value);
    
  };
  return (
    <div>
      <label>Sort By:</label>
      <select onChange={updateSortByFilter}>
        <option value='-'>-</option>
        <option value='price low to high'>price low to high</option>
        <option value='price hight to low'>price hight to low</option>
      </select>

     
     </div>
  );
};


export default connect(null, { setSort })(Dropdown);

setSort 操作如下所示:

export default (sort) => 
{
  return async(dispatch) =>{
    dispatch({
      type: SET_SORT,
      payload: { sort },
    });
  }
}

我的产品列表组件看起来像这样

const ProductList =  (props) => {
 
  

  return (
    <section>
      {console.log(props.products)}
      <h2>Products</h2>
      {props.products.map(product =>
        <div key={product.goodsSn}>
          <h3>{product.goodsTitle}</h3>
          <p>{product.description}</p>
          <p> {product.displayPrice}</p>
        </div>
      )}
    </section>
  );

};
const mapStateToProps = (state)=>({
  ...state,
  
})
export default connect(mapStateToProps)(ProductList);

我尝试将 mapStatetoprops 用于产品列表组件，但似乎每次即使“产品”的状态发生变化，列表仍然存在，并且不会根据下拉列表中的所选值更改顺序(价格从高到低/价格从低到高)，它保持来自搜索功能的顺序(它只是从 API 获取数据并返回状态中的新产品列表。

Answer 1

我在沙盒上实现了你的代码并找出了一些错误

1- setSort您的代码中没有名称

export const setSort = (sort) => {
  return async (dispatch) => {
    let res = await axios.get("https://fakestoreapi.com/products");
    //return res of fetch data to payload
    dispatch({
      type: "SET_SORT",
      payload: { sort, products: res.data }
    });
  };
};

2-变化value的 <option>有效且没有空格

      <select onChange={updateSortByFilter}>
        <option value='-'>-</option>
        <option value='LTH'>price low to high</option>
        <option value='HTL'>price hight to low</option>
      </select>

3- 返回获取数据的资源到payload在行动中(如果你获取产品数据)

    dispatch({
      type: "SET_SORT",
      payload: { sort, products: res.data }
    });

4-换 reducer

case "SET_SORT":
      const selectedSort = action.payload.sort;
      const newState = {
        ...state,
        products: action.payload.products
      };
      selectedSort === "HTL"
        ? newState.products.sort((a, b) => b.price - a.price)
        : newState.products.sort((a, b) => a.price - b.price);
      return newState.products;

代码沙盒:here is my code