Redux - How to get data from store and post it

Question

Newbie to Redux here, I have tried to follow a couple tutorials and I am not clear of how Redux actually works. It was mentioned that the store of Redux is to store the state of the whole tree. I have created and used actions, reducers, and store for my program and it works.

The question is, how do I retrieve what is in the store? Lets say after updating my component, how can I retrieve the value inside the component and to post it?

How can I know what changed in my dropdown list and to retrieve it?

Full code in Sandbox here 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}
});

Thanks in advance!

Answer 1

You will need to pass your action handlers to connect function

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

Answer 2

how do I retrieve what is in the store? Lets say after updating my component, how can I retrieve the value inside the component and to post it?

if you want to see how is store change, you can add redux-logger to middleware to see that. when store change, it's likely a props change, you can handle this in function componentDidUpdate.

How can I know what changed in my dropdown list and to retrieve it?

values in dropdown is controlled by "const products = state.productsReducer.items;", productsReducer is controlled by actions you passed in dispatch like this: "this.props.dispatch(fetchProducts());".

I think you should add redux-logger to know more how to redux work, it show on console step by step. It will help you learn faster than you think:D

Answer 3

to retrieve it you forgot the 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
  };
};

To change it you should connect another function like

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