1- A function creates a Action,this actions contains the type of action we want to take and the data or payload for the change.
Action Creator: is a function that is going to create or return a JS object that we'll call action. Action: an action has a type property and a payload property. |-> the type property: describes a change we want to perform on our data. |-> the payload property: contains the actual data
*the dispatch function is build-in redux. dispatch send the action to reducer
2- The dispatch function will take an actions as argument, make a copy and pass it to different places on our app the Reducers; The reducer will make the changes to out data and then return it with the updated data.
npm i redux react-redux
- In the index.js
-
// Redux import { Provider } from 'react-redux'; import { createStore } from "redux"; import reducers from "./reducers/index";
-
Wrap the component in the render method: ReactDOM.render(
-
);
- In store.js
- Connect the Redux store with a component ` import React, {Component} from 'react'; import { connect } from 'react-redux';
class SongList extends Component{ render(){ console.log(this.props); return
} };const mapStateToProps = (state) => { return { songs: state.songs }; };
export default connect(mapStateToProps)(SongList) `