Redux react-redux is the official React binding library. It can make your React component reads data from Redux store, and distribute to store actions to update the data
installation
Use react-redux react app in the:
npm install --save react-redux
or
yarn add react-redux
Provider and connect
React-Redux provided
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootElement
);React-Redux provides a method that allows you to connect components and store linked
usually use the following methods can be invoked connect in this way:
import { connect } from "react-redux";
import { increment, decrement, reset } from "./actionCreators";
// const Counter = ...
const mapStateToProps = (state /*, ownProps*/) => {
return {
counter: state.counter
};
};
const mapDispatchToProps = { increment, decrement, reset };
export default connect(
mapStateToProps,
mapDispatchToProps
)(Counter);Store
Store: first create an object store, this object has a variety of methods used to allow the outside world to obtain data Redux (store.getState), or to modify the data to the outside world (store.dispatch) Redux in
import { createStore } from 'redux';
const store = createStore(reducer);Action
Action: describes me doing, generally in the form of an object, which must have a type field is, for example: {type: 'Request reinforcements'}, data may also be a little {type: 'Request reinforcements' , gun: "100"}
the reducer
the reducer: roll up sleeves and open real knife real gun went dry, such as a company commander asked for reinforcements, reinforcements requirement is 100 guns, head immediately give you added 100 guns sent in the past .
const defaultState = 0;
const reducer = (state = defaultState, action) => {
switch (action.type) {
case '请求增援':
return state + action.gun;
default:
return state;
}
};action and reducer also conceivable relationship to product managers and programmers.
Product manager: "I want a button, a rounded"
programmer: "ah, well,"
product manager: "another color it red"
programmer: "ok, for good,"
almost like this, and product manager do not worry about how to achieve specific, he just said he wanted to do (type), and then point to mention to achieve the requirements (a variety of other data), programmers went realization (reducer, modify state, and then returns a new state, here to note that we have no direct return to the original state, we return a new state object because reducer function is not purely a function of side effects)
that how to trigger this action (action) it is like saying I'm a row long found the enemy, how do I report to the communications class, so class communications to deal with it?
The above mentioned is treated store.dispatch, but also add a parameter that Action
store.dispatch ({type: 'Request reinforcements', gun: "100"} )
This can trigger Action, perform the reducer, to give a the new state.
Redux and React
this point, tossing himself over Redux, Redux it did not use its own data, which data is to be handed over to React with the job, then talk about how to use the data to React.
Above we create an object store, this store we want to pass objects as props React, React that can be used.
The store can only have one, it can only be created once, which means you have to create a store object at the top level, then pass it on and then layers in order to allow all components to have access to the store object, call its methods.
Redux get the data in the
example I want to show Redux data in the render function, then I'll be able to get its data:
store.getState ()
and render this data as props into the assembly herd.
Redux update data in
if you want to modify its data, then call in JSX in
store.dispatch ({type: 'request reinforcements', gun: "100"} )
in response to changes Redux in
this problem again, after you call the store.dispatch data Redux is indeed changing, but does not change React ah. That React in the render function is not triggered and it is not as if you directly modify React React in the state is of no use and must call the setState React to re-render.
Therefore, in order to make a change Redux data we re-render, Redux himself provides a method called
store.subscribe (render)
this function can monitor changes in the state of Redux, Redux once the state has changed, render function will is called, the page will be re-rendered.
The above process is the process of manually call, but this call a little trouble, because all of the subcomponents can make use of the data store, then all of the components to be passed in the store as props, this is too much trouble.
Prior to that, or that example, you find a company commander of the enemy, is not several levels, you can report directly to the communication classes, communication classes and then generate a new command, the problem is that you report it from the bottom up is simple , but issued an order from the top layers of the transfer is still Yeah.
Like say, a company commander found the enemy, up report, communications classes to make a decision to let people play with three company commander, the head of communications classes still have to pass - the battalion commander - company commander road to the layers of release command, communications class can not be allowed to directly notify the three company commander, of course, is there, this is our React-redux library
React-redux
this is the need to use your own npm additional installation.
After using this method, we do not need layers of the command issued down
there in React-redux in the two key concepts: Provider and connect method.
Generally, we will be top-level components wrapped in Provider component, in this case, all the components it can be under the control of the react-redux, but store as an argument put Provider component must go
<Provider store = {store}>
<团长/>
<Provider>The purpose of this component is to have access to all the components in the data Redux.
This is relatively simple, we mainly talk about the connect method.
connect method:
connect(mapStateToProps, mapDispatchToProps)(MyComponent)
in fact, connect method, a total of four parameters, here mainly about the first two.
mapStateToProps
literal meaning is to map the state to props go, meaning that the mapping data Redux in the React to the props to go.
That is what data you want Redux in the React take over with.
For example, here Eren want to render this component amount own firearms. It can directly in the Erlian this component of the Redux gunOfErlian take over with
const mapStateToProps = (state) => {
return {
gun: state.gunOfErlian
}
}Then when rendering can be used directly this.props.gun
class Erlian extends Component {
constructor(props){
super(props);
}
render(){
return(
<div>this.props.gun</div>
)
}
}
Erlian = connect()(Erlian);
export default Erlian;Then this can be achieved rendering, it is to become React Redux in the state of props.
mapDispatchToProps
Through the above analysis, I believe that this function is also well understood, is to dispatch all kinds has become props so that you can directly use
Then we went to the most important point here.
const mapDispatchToProps = (dispatch) => {
return {
onClick: () => {
dispatch({
type: '请求增援',
gun : 100
});
}
};
}Change at the above components Erlian
class Erlian extends Component {
constructor(props){
super(props);
}
render(){
return(
<div>this.props.gun</div>
<button onClick = {this.props.onClick}>请求增援</button>
)
}
}
Erlian = connect()(Erlian);When I click on the button to request reinforcements, Erlian assembly of firearms, the number will be automatically updated without the need for us to manually go with store.subscribe Subscribe to render function to achieve the purpose of updating the page.
As a result we do not need to pass the object layers of the store.
This can be used anywhere, Redux modify the data in a way really convenient, but Redux recommended best practice or in a place with minimal use of connect, the logic, data related to container components are put in to deal with, other components generated by the container component layers props pass along and then render (fool components), there is not much to say.
Connection: https://www.cnblogs.com/bax-life/p/8440326.html