javascript - redux store 中的状态发生变化，但组件在视图中没有变化

Question

我正在尝试通过制作一个简单的产品列表页面来学习 react-redux，我在 chrome 中使用了 redux 开发工具，商店中的状态正确更改但我的产品列表组件在状态更改时没有重新呈现。下面是我在 store/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 获取数据并返回一个新的产品列表状态。

标签： javascriptreactjsreduxreact-redux

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-更换减速机

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;

codeSandbox：这是我的代码