thunk middleware
npm i --save redux-thunk
Redux-thunk configuration and installation of middleware
import {
createStore, applyMiddleware, compose} from 'redux'
import reducer from '../reducer/reducer'
import thunk from 'redux-thunk'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
}):compose
const enhancer = composeEnhancers(applyMiddleware(thunk))
const store = createStore(
reducer,
enhancer
// window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
export default store
Sending the request here, I don’t really understand why dispatch can be used. Later, I thought about it and explained it like this:
First, dispatch is to synchronously execute reducers to generate a new state, and there is no problem with the operation of the page; but if the click event requests a certain result, Need to wait for the result to respond before updating the view? How should it be handled? So redux introduced the thunk middleware and expanded the action to
see what the data type of the action you passed in is, non-function, not processed, function type action, automatic trigger function, and store.dispatch is passed in, here is it Explains the above disptach as a parameter to pass in doubts,
for action is a function type, the
first step is to return a function, the second step is placed in the warehouse, it will run automatically
1.const action = getTodoList()
2.store.dispatch(action)
React-Redux
npm i --save react-redux
Provider: Provider
Connector: connect
import {
connect} from 'react-redux'
class TodoList extends Component {
constructor(props) {
super(props);
}
render() {
console.log(this.props)
return (
<div>
<input
value={
this.props.inputValue} onChange={
this.props.inputChange}/>
<button onClick={
this.props.clickButton}>提交</button>
<ul>
{
this.props.list.map((item,index)=>{
return <li key={
index}>{
item}</li>
})
}
</ul>
</div>
);
}
}
const stateToProps = (state)=>{
return {
inputValue: state.inputValue,
list: state.list
}
}
const dispathToProps = (dispatch) => {
return {
inputChange(e){
let action = {
type: 'change_input',
value: e.target.value
}
dispatch(action)
},
clickButton(){
let action = {
type: 'add',
}
dispatch(action)
}
}
}
//xxx映射关系
export default connect(stateToProps, dispathToProps)(TodoList);
The provider is used to wrap the components that will be used in the store, and then enter the component to make a connection, which is equivalent to transmitting a command and doing a mapping. Then the state in the store can be mapped to the property of props. dispatchToProps is the second parameter of the connect function. Used to establish the mapping of UI component parameters to store.dispatch method. In other words, it defines which user actions should be treated as Actions and passed to the Store. To put it bluntly, it feels like adding attributes to props and then taking them out.