• Without Redux
• With Redux
• Provider
• Store

Going through the basics of React Redux and the core concepts.

Without Redux

How state management works without redux and animations showing it at the small scale and at a large scale. Passing data up and down the component tree. In some case passing up to the top of the tree and then passing down another branch to the component that requires the data for changing.

Diagram showing a larger App without state management. As the App increases in size this increases the branches and the difficult of passing data between components.

With Redux

The animation shows increasing the size of an App and adding Redux. A user may fill in form input and that data is sent to the Store. The Store then sends data to the components that are requesting that data.

Code Example

Coding example from Codesandbox.io showing an app using redux.

Writing a container for react components

// React Redux Container 
const mapStateToProps = (state /*, ownProps*/) => { 
return { counter: state.counter }
 }

mapStateToProps

mapDispatchToProps

// mapDispatchToProps 
const mapDispatchToProps = {
 increment, decrement, reset 
} 

Connect()

// Connect the parts together with the component "Counter"
export default connect( 
mapStateToProps, mapDispatchToProps 
)(Counter)

Provider

A high level component with consume the store, used in React Apps. in the animation you can see the store being consumed by the HOC provider.

// the code for setting up the store
const rootElement = document.getElementById('root') ReactDOM.render( 
	<Provider store={store}> 
		<App />
	 </Provider>
, rootElement )

Store

Simple animation showing how components interact with the store. A component at the bottom sends data to the store and then components on other branches get update from the store and then change there state.