Redux Chinese document

Vuex usage

Vuex Reference document

The story of the API

createStore(reducer, [preloadedState], enhancer)

Create a Redux store to store all the states in the application and only one store in the application

  • Reducer (Function) : Receive two parameters, the current state tree and the action to be processed, and return a new state tree
  • [preloadedState] (any) This parameter is optional
  • Enhancer (Function), much like middleware (and where the other Redux plug-ins are applied), changes the Store interface through a composite Function, returning a new enhanced Store Creator
import { createStore } from 'redux'

function reducer(state = [], action) {
  return state
}

const store = createStore(reducer)

export default store
Copy the code

More applications

  • There is only one store, but you can create multiple reducer, and then create a root reducer using combineReducers
  • The state format can be a plain object or Immutable, which is a more secure implementation

Store

The only way to change the state in a store is to dispatch an Action Store that is not a class. It is just an object with a few methods, and to create it, simply pass the reducing function at the root to createStore

  • GetState () returns the state in the application, but not the latest
  • Dispatch (Action) dispatches the action, which is the only way to trigger a state change, where the action is just a plain object
  • Subscribe (listener) is executed when there is a dispatch execution
Import React from 'React' // import store import store from './.. /.. // import {// setActionA, // setActionB //} from './.. /.. /store/actionCreators' class ReduxExample extends React.Component { constructor(props) { super(props) this.state = Store. The getState () / / subscribe whether listening to store the data in changing this. HandleStoreChange = this. HandleStoreChange. Bind (this) store.subscribe(this.handleStoreChange); } render() { return ( <div> <h2>redux-example</h2> <div> {this.state.valueA} </div> </div> ) } componentDidMount() { console.log(store.getState()) setTimeout(() => { store.dispatch({ type: 'A', value: 'A' }) console.log(this.state) console.log(store.getState()) }, 1000)} handleStoreChange() {// retrieve state this.setState(store.getState())}} export default ReduxExampleCopy the code
  • replaceReducer(nextReducer)

combineReducers

Create a root Reducer from the reducer, much like Vuex’s modules

applyMiddleware

To apply other plug-ins

bindActionCreators

Reference documentation is used to make it easier for components to get action

compose

When you have multiple enhancers, that is, multiple plug-ins working together, you can wrap them in the compose function

react-redux

A better app store in the component makes it easier to get the state tree and dispatch from the store

  • <Provider store>
  • <Provider store>Make the component hierarchyconnect()Methods all get the Redux store. Normally, your root component should be nested in<Provider>In order to useconnect()Methods.
  • connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])