Story and React – story

1. Redux

1.1 store

The Store is the object that ties them together. Store has the following responsibilities:

• Maintain the state of the application;
• Get: The getState() method gets the current state tree.
• Update: The dispatch(action) method updates the state. This is the only way to trigger state changes;
• Listen: Subscribe (listener) to register the listener. The returned function unregisters the listener.

import { createStore } from 'redux';
const store = createStore(reducer);
Copy the code

1.2 Reducer function

Reducers specifies how changes in the application state are sent to the Store in response to actions. The Reducer is a pure function that accepts the old state and action and returns the new state.

const reducer = (state = 0, action) = > {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}
Copy the code

1.3 the Action function

The Action is the payload that transfers data from the application to the Store. It is the only source of store data and sends the action to the store via store.Dispatch ().

{ type: 'INCREMENT' }
Copy the code

1.4 Example

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import Counter from './components/Counter'
import counter from './reducers'

const store = createStore(counter)
ReactDOM.render(
  <Counter
    value={store.getState()}
    onIncrement={()= > store.dispatch({ type: 'INCREMENT' })}
    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
  />.document.getElementById('root')
)
store.subscribe(render)
Copy the code

Counter.js

import React, { Component } from 'react'

class Counter extends Component {
  constructor(props) {
    super(props)
  }

  incrementIfOdd = () = > {
    if (this.props.value % 2! = =0) {
      this.props.onIncrement()
    }
  }

  incrementAsync = () = > {
    setTimeout(this.props.onIncrement, 1000)}render() {
    const { value, onIncrement, onDecrement } = this.props
    return (
      <>
        Clicked: {value} times
        <button onClick={onIncrement}>+</button>
        <button onClick={onDecrement}>-</button>
        <button onClick={this.incrementIfOdd}>Increment if odd</button>
        <button onClick={this.incrementAsync}>Increment async</button>
      </>)}}export default Counter
Copy the code

reducers/index.js

export default (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}
Copy the code

2. React-Redux

2.1 the Provider TAB

The makes the Connect () method in all tiers available to the Redux Store.

<Provider store={store}>
  <App />
</Provider>
Copy the code

2.2 the connect function

Connect the React component to the Redux Store and return a new component class that has been connected to the Redux Store.

Connect ([mapStateToProps], [mapDispatchToProps])(App) -mapStateToprops The parameter that maps state to the UI component - mapDispatchToProps is responsible for the output logic that maps user actions on the UI component to actions.Copy the code

2.3 Example

index.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'
import Counter from './components/Counter'
import counter from './reducers'

const store = createStore(counter)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>.document.getElementById('root'))Copy the code

Counter.js

import React, { Component } from 'react'

// This is the props. This is the props
function mapStateToProps(state) {
  return {
    value: state.count
  }
}

/ / the dispatch became can directly use this. Props. OnIncreaseClick
function mapDispatchToProps(dispatch) {
  return {
    onIncreaseClick: () = > dispatch({ type: 'increase'}}})class Counter extends Component {
  render() {
    const { value, onIncreaseClick } = this.props
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>Increase</button>
      </div>)}}export default connect(mapStateToProps, mapDispatchToProps)(Counter)
Copy the code

reducers/index.js

export default = (state = { count: 0 }, action) = > {
  const count = state.count
  switch (action.type) {
    case 'increase':
      return { count: count + 1 }
    default:
      return state
  }
}
Copy the code