Javascript Redux-如何从存储中获取数据并将其发布

这里是Redux的新手，我试着遵循一些教程，但我不清楚Redux实际上是如何工作的。有人提到Redux的存储是存储整个树的状态。我已经为我的程序创建并使用了动作、减缩器和存储，并且它工作正常

问题是，我如何取回商店里的东西？比如说，在更新组件后，如何检索组件内部的值并发布它

我如何知道我的下拉列表中更改了什么并检索它

这里是沙箱中的完整代码

store.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './RootReducer';

export default function configureStore() {
 return createStore(
  rootReducer,
   applyMiddleware(thunk)
 );
}

ProductsList.js

import React from "react";
import { connect } from "react-redux";
import { fetchProducts } from "./SimpleActions";

class ProductList extends React.Component {
    constructor(props)
    {
        super(props);
        this.state = {
            selecteditems: '',
            unitPrice: 0
        }
    }

    componentDidMount() {
        this.props.dispatch(fetchProducts());
    }

    componentDidUpdate(prevProps, prevState) {
        if(prevState.selecteditems !== this.state.selecteditems)
        {
            this.setState((state, props) => ({
                unitPrice: ((state.selecteditems * 1).toFixed(2))
            }));
        }
    }

  render() {
    const { error, loading, products } = this.props;

    if (error) {
      return <div>Error! {error.message}</div>;
    }

    if (loading) {
      return <div>Loading...</div>;
    }

    return (
    <div>
        <select
            name="sel"
            className="sel"
            value={this.state.selecteditems}
            onChange={(e) => 
                this.setState({selecteditems: e.target.value})}
        >
            {products.map(item => 
            <option key={item.productID} value={item.unitPrice}>
                {item.itemName}
            </option>
            )}
        </select>

        <p>Unit Price: RM {this.state.unitPrice} </p>
    </div>
    );
  }
}

const mapStateToProps = state => {
  const products = state.productsReducer.items;
  const loading = state.productsReducer.loading;
  const error = state.productsReducer.error;
  return {
      products,
      loading,
      error,
  }
};

export default connect(mapStateToProps)(ProductList);

---

提前谢谢

您需要传递操作处理程序来连接函数

connect（mapstatetops，{actions}）（产品列表）。

我如何取回商店里的东西？比如说，在更新组件后，如何检索组件内部的值并发布它

如果您想了解存储更改的方式，可以将redux logger添加到中间件中来查看。当存储更改时，很可能是道具更改，您可以在函数componentDidUpdate中处理此问题

我如何知道我的下拉列表中更改了什么并检索它

下拉列表中的值由“const products=state.productsReducer.items；”控制，productsReducer由您在dispatch中传递的操作控制，如：“this.props.dispatch（fetchProducts（））；”

---

我认为您应该添加redux记录器，以了解更多如何进行redux工作，它会一步一步地显示在控制台上。它将帮助您以比您想象的更快的速度学习：D

要检索它，您忘记了

selecteditems

const mapStateToProps = state => {
  const products = state.productsReducer.items;
  const loading = state.productsReducer.loading;
  const error = state.productsReducer.error;
  const selecteditems = state.prodcuts.selecteditems;
  return {
    products,
    loading,
    error,
    selecteditems
  };
};

要更改它，您应该连接另一个函数，如

const mapDispatchToProps = dispatch => {
    return {
        onChangeDropdownSelection: (selected)=> dispatch(actions.setSelectedDropdown(selected))
    }
}

---

将操作传递给connect函数后，是否有方法读取我传递给状态的内容？您可以使用Redux DevTools。这是chrome中的一个插件。要使用它，请添加

const composeEnhancers=window.\uuu REDUX\u DEVTOOLS\u EXTENSION\u COMPOSE\uuu124;|COMPOSE
const store=createStore（还原器、复合器（applyMiddleware（reduxThunk））
到您的index.js也
从'redux'导入{compose}谢谢，我将研究redux记录器。您知道如何发布更改的值吗？我添加了redux logger，它清楚地显示了上一个状态和下一个状态，但是当我更改下拉列表上的项目时，它不会显示任何内容。如何将其显示在日志中，并将其存储在某个位置？因为您正在更改组件中的状态，它不在store redux上：“onChange={（e）=>this.setState（{selecteditems:e.target.value}）”。您应该编写一个新函数来设置要存储的状态和更新值，就像您更新productsReducer一样。就像您使用productsReducer一样，创建新操作，创建新reducer，将reducer添加到存储，更改值下拉列表时调用dispatch。因此，对于我的onChange，它将是this.props.something，而不是this.setState？您能否详细说明连接另一个函数的方法？我不明白代码是怎么工作的
const mapDispatchToProps = dispatch => {
    return {
        onChangeDropdownSelection: (selected)=> dispatch(actions.setSelectedDropdown(selected))
    }
}