Shulou(Shulou.com)06/03 Report--

Editor to share with you the example analysis of the react.js framework Redux, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

React.js Framework Redux

Https://github.com/reactjs/redux

Installation:

Npm install redux react-redux# is based on react, which we installed earlier.

Redux reference documentation:

Http://redux.js.org/

Core concept of Redux: Store

We can simply understand that it is used to store the State of each component or the independent state defined by yourself to read, update and monitor the state uniformly.

Http://redux.js.org/docs/basics/Store.html

Reduce

Officials tell us that the basic use of redux is as follows:

Import {createStore} from "redux"; import todoApp from ". / reducers"; let store = createStore (todoApp)

The createStore () argument passes in a function, Function.

The concept in redux is called Reduce

The basic form of Reduce:

Function myFun (state,action) {/ /...}

Of course, we can also use the arrow function form of esmascript 2015 to define it.

Actual combat exercise

1. Let's define a Reduce first

InfoReduce.js:

/ / Test data let info = {title: "Test title", clicknum:0}; / / pass the data through the parameter hull export default (state = info, action) = > {return state; / / return the test data}

2. When Reduce is ready, we begin to use Redux

Import InfoReduce from ". /.. / redux/InfoReduce"; import {createStore} from "redux"; let store = createStore (InfoReduce)

3. Store, a very important concept in Redux, has been created. Let's see how to use it in components.

/ / define a component called InfoDetail class InfoDetail extends React.Component {/ / construct constructor (props) {super (props); / / initial state this.state = {infoData:store.getState () / / get data through the method of store object} } render () {return News title: {this.state.infoData.title} clicks: {this.state.infoData.clicknum}

Modify number of clicks

}}

Get the data through store.getState ().

Here we basically understand: Reducers is a specified function that generates a new state and passes it to Store; our components get state update component data through Store.

Learn about action

The official document's description of action:

Http://redux.js.org/docs/basics/Actions.html

In fact, through the word action, we can guess that it is used to deal with business operations.

Where is action in our previous code?

When we define the Reducer function, the second argument is:

Export default (state, action) = > {}

1. Since action is an operation, it is needed in the event handler on our component

Modify number of clicks

Bind a click event function addClick to the button

2. Let's take a look at what's in the addClick function.

AddClick () {/ / modify state store.dispatch ({type: "INFO_CLICK"}) this.setState ({/ / Update state infoData:store.getState ()})}

This.setState () We learned earlier that this is used to update status (state)

Store.dispatch () this is something in our Redux again, and this method actually dispatches the action.

It is distinguished by type.

3. According to our requirements, the business logic to be handled by our action is to add to clicknum

/ / Test data let info = {title: "Test title", clicknum:0}; / / pass the data through the parameter hull export default (state = info, action) = > {if (action.type = = "INFO_CLICK") {let oldNum = state.clicknum; oldNum++; / / return new data return Object.assign ({}, state, {clicknum:oldNum});} return state / / the test data is returned}

In our Reducer function, we judge by action.type, and then deal with the business logic correlation.

At this point, we may be confused about why Redux is still troublesome. Yes, it is usually used in projects with complex business logic.

The above is all the content of the article "sample Analysis of react.js Framework Redux". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.