react+redux from scratch-JS Tutorial-php.cn

react+redux from scratch

php中世界最好的语言

Release： 2018-06-07 11:44:50

Original

1489 people have browsed it

This time I will bring you react redux from scratch. What are the precautions for starting react redux from scratch? The following is a practical case, let's take a look.

Environment preparation

For convenience, create-react-app is used here to build the react environment

create-react-app mydemo

Copy after login

Pop-up configuration

If you need to customize the react configuration, you need to run the following command to pop up the configuration file.

npm run eject

Copy after login

Install redux

npm i redux --save

Copy after login

Simple understanding

The simple usage of redux is to subscribe and publish information through its store.

Subscribe to action through subscribe and trigger action through dispatch. The reducer defines what each action needs to do.

demo code

reducer definition

const Add = 'addGirl', Remove = "removeGirl";
export function reducer(state = 0, action) {
  switch (action.type) {
    case Add:
      return state + 1;
    case Remove:
      return state - 1;
    default:
      return 10;
  }
}
//action creator,把action封装成一个方法，这样用的时候不用每次定义，避免出错
export function addCreator() {
  return { type: Add };
}
export function removeCreator() {
  return { type: Remove };
}
export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}

Copy after login

Entry file index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore } from 'redux';
import thunk from 'redux-thunk';
import { reducer,addCreator,removeCreaator } from './index.redux';
import { Provider } from 'react-redux'
const store = createStore(reducer);
function render() {
  ReactDOM.render(
    <App store={store} addCreator={addCreator} removeCreator={removeCreator} />,
    document.getElementById('root')
  );
}
//封装成方法，方便下面的store的订阅调用
render();
//每当dispatch时，订阅的函数就会执行
store.subscribe(render);
registerServiceWorker();

Copy after login

App.js

import React, { Component } from 'react';
import './App.css';
class App extends Component {
 render() {
  var store=this.props.store;
  var num=store.getState();
  return (
   <p className="App">
    <h1>现在有机关枪{this.props.num}把。</h1>
    <button onClick={() => { store.dispatch(this.props.addCreator()) }}>add</button>
    <button onClick={() => { store.dispatch(this.props.removeCreator()) }}>remove</button>
   </p >
  );
 }
}
export default App;

Copy after login

To trigger action through store dispatch, the event subscribed in index.js will be executed.

Asynchronous execution of redux

If you need to perform asynchronous operations in redux, you need to install the react-thunk plug-in

npm i react-thunk --save

Copy after login

At the same time, you need the applyMiddleware of the redux plug-in

Key code

The setting is actually very simple. When creating the store, just pass the thunk to it.

import thunk from 'redux-thunk';
const store = createStore(reducer, applyMiddleware(thunk));

Copy after login

Add a button that triggers an asynchronous operation in app.js. An asynchronous method has been defined in the reducer.

export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}

Copy after login

Asynchronously calling the method will return a method with two parameters. Both parameters are functions, the first is the dispatch function, and the second is the getState function.
dispatch triggers action, and getState gets the value of state.

Add code in app.js

<button onClick={() => { store.dispatch(this.props.addAsync()) }}>addAsync</button>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!