redux&&react-redux

redux

Redux components: state, action, reducer, store
Main responsibilities of store:
Maintain application state
Provide getState() method to obtain state
Provide dispatch() method to send action
Register for listening through subscribe()
Unregister the listener through the return value of subscribe()
usage:

• action: must have a return value. The returned object is {type: xx’, key: value}, which must have a type attribute.

The action/index.js component writes action-related information
const sendAction = () => {<!-- --> // Take whatever name you want
return {<!-- -->
type: 'send_action', // Take whatever name you want
...//Write the remaining parameters that need to be passed
value: 'Send love~' //The value returned when calling
}
}
const stopAction = () => {<!-- --> // Take whatever name you want
return {<!-- -->
type: 'stop_action', // Take whatever name you want
...//Write the remaining parameters that need to be passed
value: 'Stop sending'
}
}
module.exports = {<!-- -->
sendAction,
stopAction,
}

• reducer: You can write an initial value and determine the type value of the action here.

reducer/index.js component
const initState = {<!-- -->
sendValue: 'Send information',
stopValue: 'Stop information',
} // Define initial value

const reducer = (state = initState, action) {<!-- -->
switch(action.type) {<!-- -->
case: 'send_action':
return {<!-- -->
sendValue: action.Value
}
case: 'stop_action':
return {<!-- -->
stopValue: action.Value
}
case: 'add_action':
retrun {<!-- -->
// All returned states are new states, so I can just take any value.
addValue: action.value
}
default:
return state;
}
}

const loveReducer = (state = initState, action) {<!-- -->
switch() {<!-- -->
...
}
 }
const ... = (state, action) {<!-- -->}
module.exports = {<!-- -->
reducer,
loveReducer,
...
}

• store: need to import reducer

import {<!-- --> legacy_createStore as createStore } from 'redux';

//Import reducer
import {<!-- --> reducer, xxx } from '../reducer/index.js';

//Build store
export default createStore(reducer)

• Usage: Import action and store on the page where action needs to be sent.

import React from 'react';
import store from '../../store/index.js';
import {<!-- --> sendAction, stopAction } from '../../action/index.js';

export default class Home extends React.Component {<!-- -->
handleClick = () => {<!-- -->
// There are two ways to send action: 1. Send within the action component
const action = sendAction()
store.dispatch(action)
\t\t
// 2. Direct store.dispatch
store.dispath({<!-- -->
type: 'add_action', //The type of action must be passed
//The rest can be passed by value
value: 'The value passed by add_action, this value will be in the reducer's action'
})
}

// Listen when the component is loaded. The specific usage requires Baidu.
componentDidMount(){<!-- -->
store.subscribe(() => {<!-- -->
// this.setState({});
})
}
render(){<!-- -->
return (
<>
<button onClick="this.handleClick">Click to send action</button>
</>
)
}
}

Use the value of add_action in the child component
To get the attribute value in the store, use store.getState()

import React from 'react';
// Need to introduce store
import store from '../../store/index.js';
export default class Child extends React.Commponents {<!-- -->
render(){<!-- -->
return (
<div>
{<!-- --> store.getState().addValue }
</div>
)
}
}

react-Redux

Two important members in react-Redux:
1.Provider: This component enables your entire app to obtain data in the store
2.connect: This method can associate the component with the store

• Provider:
  Provider is wrapped in the outermost layer of the root component so that all sub-components can get State.
  Provider receives store as props, and then passes it down through context, so that any component in react can obtain store through context.

• connect:
  connect: If the internal components of Provider want to use the data in the state, they must be wrapped and encapsulated by connect. In other words, they must be enhanced by connect.
  Connect is to facilitate our components to obtain the state in the store.

Use of react-redux: Need to be used in combination with redux reducer and store

1. It is necessary to introduce the store and bind the store at the outermost layer of the root component that introduces two sub-components.

import React from 'react';
import srore from '../../store/index.js'; // Same as store/index.js above
import {<!-- --> Provider } from 'react-redux';
//Introduce two subcomponents
import ComA from '../xxx/ComA.js';
import ComB from '../xxx/ComB.js';
class Main extends React.Commpont {<!-- -->
render(){<!-- -->
return(
<Provider store={<!-- -->store}>
<ComA />
<ComB />
</Provider>
)
}
}

2. Use connect in two sub-components, one sending component and one receiving component
   connect (receiving function, sending function) (need to use connect components)

ComA component: send action component
import React from 'react';
//Import connect
import {<!-- --> connect } from 'react-redux';
class ComA extends React.Commponent{<!-- -->
addClick = () => {<!-- -->
// The mapDispatchToProps function below is props in the component. Use this.props.xxx to call specific actions.
this.props.addAction();
}
recClick = () => {<!-- -->
this.props.recAction();
}
render() {<!-- -->
refturn {<!-- -->
<>
<button onClick={<!-- -->this.addClick}> + </button>
<button onClick={<!-- -->this.recClick}>-</button>
</>
}
}
}

const mapDispatchToProps = dispatch => {<!-- -->
//Receive dispatch parameters
// There must be a return return value, return object {}, key-value pair form key: ()=>callback function
return {<!-- -->
addAction: () => {<!-- -->
dispath({<!-- -->
type: 'add_action', // action must have a type value
value: 'The value to be passed',
})
},
recAction: () => {<!-- -->
dispath({<!-- -->
type: 'rec_action', // action must have a type value
value: 'The value to be passed',
})
}
}
}
// connect needs to be exported. The first function is for receiving. This component does not need to be set to null. It only needs the second sending function. The name can be chosen casually.
export default connect(null, mapDispatchToProps)(ComA)

reducer/index.js component
const initState = {<!-- -->
count: 0
}
exports.reducer = (state, action) => {<!-- -->
switch(action.type){<!-- -->
case: 'add_action':
return {<!-- -->
count: state.count + 1
}
case: 'rec_action':
return {<!-- -->
count: state.count - 1
}
}
}

Receive value in child component:

import React from 'react';

//Import connect
import {<!-- --> connect } from 'react-redux';

class ComB extends React.Commponent {<!-- -->
render() {<!-- -->
return(
// Use this.props within the component to get the value
<div>{<!-- --> this.props.count }</div>
)
}
}

const mapStateToProps = (state) => {<!-- -->
// Must return
return state
}
// The receiving component only needs the first receiving function and needs to be exported
export default connect(mapStateToProps)(ComB)