Redux - Как получить данные из магазина и опубликовать их - PullRequest
Новая
       8

Redux - Как получить данные из магазина и опубликовать их

0 голосов
/ 12 февраля 2020

Новичок ie в Redux здесь, я попытался выполнить пару уроков, и мне не ясно, как на самом деле работает Redux. Было упомянуто, что магазин Redux предназначен для хранения состояния всего дерева. Я создал и использовал действия, редукторы и хранилище для моей программы, и это работает.

Вопрос в том, как мне найти то, что находится в магазине? Допустим, после обновления моего компонента, как я могу получить значение внутри компонента и опубликовать его?

Как узнать, что изменилось в моем раскрывающемся списке, и получить его?

Полный код в Песочнице здесь 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}
});

Заранее спасибо!

Ответы [ 3 ]

1 голос
/ 12 февраля 2020

Вам нужно будет передать свои обработчики действий для подключения функции 

connect(mapStateToProps,{actions})(ProductList).
0 голосов
/ 12 февраля 2020

чтобы получить его, вы забыли 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))
    }
}
0 голосов
/ 12 февраля 2020

как мне узнать, что находится в магазине? Допустим, после обновления моего компонента, как я могу получить значение внутри компонента и опубликовать его?

, если вы хотите увидеть, как происходит изменение хранилища, вы можете добавить redux-logger в промежуточное ПО, чтобы увидеть который. когда смена магазина, скорее всего, смена реквизита, вы можете справиться с этим в функции componentDidUpdate.

Как узнать, что изменилось в моем раскрывающемся списке, и получить его?

значения в выпадающем списке контролируются "const products = state.productsReducer.items;", productsReducer контролируется действиями, которые вы передали в диспетчере, например: "this.props.dispatch (fetchProducts ());".

Я думаю, что вы должны добавить redux-logger, чтобы узнать больше о том, как редуксировать работу, это показано на консоли шаг за шагом. Это поможет вам учиться быстрее, чем вы думаете: D

...