Redux

Redux

Redux is a JavaScript state container that provides predictable state management

The three principles

1. Single data source

The state of the entire application is stored in an object tree that exists in only one store.

console.log(store.getState())
Copy the code

2. State is read-only

The only way to change state is to trigger an action, which is a generic object that describes events that have occurred.

Ensures that neither views nor network requests can directly modify state, instead they can only express the intent to change it. Because all changes are centralized and executed strictly one after the other, there is no need to worry about race conditions. Actions are just ordinary objects, so they can be logged, serialized, stored, and played back during debugging or testing.

store.dispatch({
  type: 'COMPLETE_TODO'.index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER'.filter: 'SHOW_COMPLETED'
})
Copy the code

3. Use pure functions to perform changes

To describe how an action changes the State Tree, you need to write reducers.

Reducer is just pure functions that receive the previous state and action and return the new state. You can start with just a Reducer, but as the application gets bigger, you can break it down into smaller reducers that work independently on different parts of the state tree. Because Reducer is just a function, you can control the order in which they are called, pass in additional data, Even write reusable reducers to handle some common tasks

Required dependency packages

// src/store/index.js
npm i redux --save
npm i react-redux --save
npm i redux-thunk --save // An asynchronous middleware implementation library

npm i redux-persist --save // Redux persistence implementation (depending on the actual situation whether to install)
Copy the code

Example

// src/store/state/type.js
export const INCREASE = 'INCREASE';
export const DECREASE = 'DECREASE';
export const RESET = 'RESET';
Copy the code

// src/store/state/action.js
import { INCREASE, DECREASE, RESET } from './type';

const increase = () = > ({ type: INCREASE });
const decrease = () = > ({ type: DECREASE });
const reset = () = > ({ type: RESET });

export {
    increase,
    decrease,
    reset
}
Copy the code

// src/store/state/reducer.js
import { combineReducers } from 'redux';
import { INCREASE, DECREASE, RESET} from './type';

// Original default state
const defaultState = {
  count: 5
}

function counter(state = defaultState, action) {
  switch (action.type) {
    case INCREASE:
      return { ...state, count: state.count + 2 };
    case DECREASE:
      return { ...state, count: state.count - 2 };
    case RESET:
      return { ...state, count: 0 };
    default:
      returnstate; }}export default combineReducers({
    counter
});
Copy the code

// src/store/index.js
import { createStore } from 'redux';
import rootReducer from './state/reducer';

const configureStore = preloadedState= > {
    return createStore (
        rootReducer,
        preloadedState
    );
}

const store = configureStore();

export default store;
Copy the code

// App.js
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import store from './src/store';
import Login from './src/view';

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Login/>
      </Provider>); }}Copy the code

// Login.js
import React, { useState, Component } from "react";
import { Button, Text, StyleSheet, View } from "react-native";

import { connect } from 'react-redux';
import { increase, decrease, reset } from '@/store/state/action';

class Login extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 0.6}}_onPressReset() {
    this.props.dispatch(reset());
  }

  _onPressInc() {
    this.props.dispatch(increase());
  }

  _onPressDec() {
    this.props.dispatch(decrease());
  }
  
  render() {
    return (
      <View>
          <Text style={{color: "red", textAlign: "center", fontSize: 20}} >{this.props.counter.count}</Text>
          <Button title="Zero" onPress={()= >this._onPressReset()}></Button>
          <Button title="Add" onPress={()= >this._onPressInc()}></Button>
          <Button title="Cut" onPress={()= >this._onPressDec()}></Button>
      </View>)}}const styles = StyleSheet.create({
    
});

const mapStateToProps = state= > ({
  counter: state.counter
})
export default connect(mapStateToProps)(Login);
Copy the code