# Redux

See redux for base redux(global state management)

React component's state and action dispatching methods/event handles is now passed in as props by redux

So redux changes passed in as props, trigger rerender

## Components Types

### Container Components

Wrapper handle state management/redux and dispatchs presentational comps can do

### Presentational Components

Present their props just as normal react components and use their prop callbacks

*Forms can keep track of their own state so UI can sync*

## Basics

### Provider

Provide your store to all your React components, wrap your app

```jsx
import { Provider } from 'react-redux';

<Provider store={store}>
    <App />
</Provider>
```

### Connect

Connect store state to component props

```jsx
import { connect } from 'react-redux';

//how will the props be available
const mapStateToProps = state => {
    return {
        items: state.items
    };
};

//how will dispatchs map to redux actions
const mapDispatchToProps = dispatch => {
    return {
        onAdd: (name, price) => {
            dispatch(addItem(name, price));
        },
        onDelete: id => {
            dispatch(deleteItem(id));
        }
    };
};

// to be used as <ItemsListContainer />
const ItemsListContainer = connect(mapStateToProps, mapDispatchToProps)( 
    Itemslist //what component to attach redux state to
);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://openai.gitbook.io/code-cheatsheets/react/state_management/redux/react-redux.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.