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

Question

这里是Redux的新手，我尝试遵循一些教程，但不清楚Redux的实际工作方式。有人提到Redux的存储是存储整个树的状态。我已经为我的程序创建并使用了动作，reduce和存储，它可以正常工作。

问题是，如何检索商店中的物品？可以说，在更新组件之后，如何在组件内部检索值并将其发布？

我如何知道下拉列表中的更改并进行检索？

此处为沙盒中的完整代码https://codesandbox.io/s/elated-goldberg-1pogb

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);

SimpleAction.js

export function fetchProducts() {
    return dispatch => {
        dispatch(fetchProductsBegin());
        return fetch('http://localhost:55959/api/products')
        .then(handleErrors)
        .then(res => res.json())
        .then(results => {
            dispatch(fetchProductsSuccess(results));
            return results;
        })
        .catch(error => dispatch(fetchProductsFailure(error)));
    };
}

function handleErrors(response) {
    if(!response.ok) {
        throw Error (response.statusText);
    }
    return response;
}

export const FETCHPRODUCTS_BEGIN = 'FETCHPRODUCTS_BEGIN';
export const FETCHPRODUCTS_SUCCESS = 'FETCHPRODUCTS_SUCCESS';
export const FETCHPRODUCTS_FAILURE = 'FETCHPRODCUTS_FAILURE';

export const fetchProductsBegin = () => ({
    type: FETCHPRODUCTS_BEGIN
});

export const fetchProductsSuccess = products => ({
    type: FETCHPRODUCTS_SUCCESS,
    payload: {products}
});

export const fetchProductsFailure = error => ({
    type: FETCHPRODUCTS_FAILURE,
    payload: {error}
});

提前感谢！

Answer 1

您将需要通过动作处理程序来连接功能

connect(mapStateToProps,{actions})(ProductList).

Answer 2

我如何检索商店里的东西？可以说，在更新组件之后，如何在组件内部检索值并将其发布？

如果您想了解商店的变化，可以将redux-logger添加到中间件中进行查看。当商店更改时，很可能是道具更改，您可以在componentDidUpdate函数中进行处理。

我如何知道下拉列表中的更改并进行检索？

下拉列表中的值由“ const products = state.productsReducer.items;”控制，productReducer由您在调度中传递的动作控制，例如：“ this.props.dispatch（fetchProducts（））;”。

我认为您应该添加redux-logger以了解更多关于redux的工作方法，它会逐步显示在控制台上。它可以帮助您比您想象的更快地学习：D

Answer 3

要检索它，您忘记了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))
    }
}