1. Why use redux
1. React is just a js library for building user interfaces
2. For calling parent-child components, you can only pass values level by level through the way shown on the left of Figure 1
3. Using redux, you can build a store, store the values that need to be forwarded in the warehouse, and each component can be easily accessed. As shown on the right
Figure 1 Figure 2 Figure 2 Understanding the value of redux.
react Components can be understood as: A student who wants to borrow books from the library
Action Creators can be understood as one sentence: I want to borrow a copy of "Water Margin"
Store can be understood as: Librarian, when he hears that you want to borrow "Water Margin", the first thing to do is to check the information of the books in the library.
Reducers can be understood as: the information of the books in the library, here Search the information about the "Water Margin" in the information, and then feed it back to the administrator, and the student who borrowed the book can get this information from the administrator.
3. Explanation of the specific implementation of todolist (Figure 3)
A total of three dom elements, Input Button List
1. TodoList component gets data from store. this.state = store.getState()
2. store.subscribe(this.funcName), when the content in the store changes, execute the function
3. Input bind the onChange event, when the content is input , Pass the value to the inputValue in the store, and let the inputValue be displayed on the Input
4. Button binds the onClick event, when the event occurs, the message of the event is sent to the store, and the new element inputValue in the List.
5. Each List element is bound to an onClick event. When a click occurs, the message of the event is sent to the store, and the list deletes the element.
Four: Code
todolist.js
Note: What is sent to the store is an action = {type:, ...}, and then use the function store.dispatch(action ) Pass the value to the reducer
The reducer makes different actions according to the different action.types obtained.
import React, {Component} from'react';
import {Button, Input, List} from ‘antd‘;
import store from ‘./store/index‘;
export default class TodoList extends Component{
constructor(props){
super(props);
this.handleInputChange = this.handleInputChange.bind( this);
this.handleBtnCLick = this.handleBtnCLick.bind( this);
this.state = store.getState();
this.handleStoreChange = this.handleStoreChange.bind( this);
store.subscribe(this.handleStoreChange);
}
render(){
return(
<Input
value={this.state.inputValue}
style={{width:‘300px‘, marginTop:‘10px‘}}
placeholder="Enter items"
onChange={this.handleInputChange}
/>
<Button
type="primary"
onClick={this.handleBtnCLick}
>Submit
<List
style={{width:‘300px‘, marginTop:‘10px‘}}
bordered
dataSource={this.state.list}
renderItem={(item, index) => this.handleDeleteItem.bind(this, index)}>{item} }
/>
)
}
handleInputChange(e){
const action = {
type: ‘input_change‘,
value: e.target.value
}
store.dispatch(action);
}
handleBtnCLick(){
const action = {
type: ‘add_item‘,
}
store.dispatch(action)
}
handleStoreChange(){
this.setState(store.getState())
}
handleDeleteItem(index){
const action = {
type: ‘delete_item‘,
index: index
}
store.dispatch(action)
}
}
View Code
store/index.js
import {createStore} from'redux';
import reducer from ‘./reducer‘;
const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
export default store;
View Code
store/reducer.js
const defaultState = {
inputValue: ‘’,
list:[]
}
export default (state = defaultState, action) => {
if (action.type === ‘input_change‘){
let newState = JSON.parse(JSON.stringify(state));
newState.inputValue = action.value;
return newState;
}
if (action.type === ‘add_item‘){
let newState = JSON.parse(JSON.stringify(state));
newState.list.push(newState.inputValue);
newState.inputValue = ‘‘;
return newState;
}
if (action.type === ‘delete_item‘){
let newState = JSON.parse(JSON.stringify(state));
newState.list.splice(action.index, 1)
return newState;
}
return state;
}
View Code
1. React is just one Js library for building user interface
2. For calling parent-child components, you can only pass values level by level through the way shown on the left of Figure 1
3. Using redux, you can build a store, store the values that need to be forwarded in the warehouse, and each component can be easily accessed. As shown on the right
react Components can be understood as: A student who wants to borrow books from the library
Action Creators can be understood as one sentence: I want to borrow a book "Water Margin"
Store can be understood as: Librarian, when he hears that you want to borrow "Water Margin", the first thing is to check the information of the books in the library
Reducers can be understood as: Information of the books in the library , Search the information about "Water Margin" in this information, and then feed it back to the administrator, and the student who borrowed the book can get this information from the administrator.
A total of three dom elements, Input Button List
1. The TodoList component gets data from the store. this.state = store.getState()
2. store.subscribe(this.funcName), when the content in the store changes, execute the function
3. Input bind the onChange event, when the content is input , Pass the value to the inputValue in the store, and let the inputValue be displayed on the Input
4. Button binds the onClick event, when the event occurs, the message of the event is sent to the store, and the new element inputValue in the List.
5. Each List element is bound to an onClick event. When a click occurs, the message of the event is sent to the store, and the list deletes the element.
import React, {Component} from'react';
import {Button, Input, List} from ‘antd‘;
import store from ‘./store/index‘;
export default class TodoList extends Component{
constructor(props){
super(props);
this.handleInputChange = this.handleInputChange.bind( this);
this.handleBtnCLick = this.handleBtnCLick.bind( this);
this.state = store.getState();
this.handleStoreChange = this.handleStoreChange.bind( this);
store.subscribe(this.handleStoreChange);
}
render(){
return(
<Input
value={this.state.inputValue}
style={{width:‘300px‘, marginTop:‘10px‘}}
placeholder="Enter items"
onChange={this.handleInputChange}
/>
<Button
type="primary"
onClick={this.handleBtnCLick}
>Submit
<List
style={{width:‘300px‘, marginTop:‘10px‘}}
bordered
dataSource={this.state.list}
renderItem={(item, index) => this.handleDeleteItem.bind(this, index)}>{item} }
/>
)
}
handleInputChange(e){
const action = {
type: ‘input_change‘,
value: e.target.value
}
store.dispatch(action);
}
handleBtnCLick(){
const action = {
type: ‘add_item‘,
}
store.dispatch(action)
}
handleStoreChange(){
this.setState(store.getState())
}
handleDeleteItem(index){
const action = {
type: ‘delete_item‘,
index: index
}
store.dispatch(action)
}
}
View Code
import React, {Component} from'react ';
import {Button, Input, List} from ‘antd‘;
import store from ‘./store/index‘;
export default class TodoList extends Component{
constructor(props){
super(props);
this.handleInputChange = this.handleInputChange.bind( this);
this.handleBtnCLick = this.handleBtnCLick.bind( this);
this.state = store.getState();
this.handleStoreChange = this.handleStoreChange.bind( this);
store.subscribe(this.handleStoreChange);
}
render(){
return(
<Input
value={this.state.inputValue}
style={{width:‘300px‘, marginTop:‘10px‘}}
placeholder="Enter items"
onChange={this.handleInputChange}
/>
<Button
type="primary"
onClick={this.handleBtnCLick}
>Submit
<List
style={{width:‘300px‘, marginTop:‘10px‘}}
bordered
dataSource={this.state.list}
renderItem={(item, index) => this.handleDeleteItem.bind(this, index)}>{item} }
/>
)
}
handleInputChange(e){
const action = {
type: ‘input_change‘,
value: e.target.value
}
store.dispatch(action);
}
handleBtnCLick(){
const action = {
type: ‘add_item‘,
}
store.dispatch(action)
}
handleStoreChange(){
this.setState(store.getState())
}
handleDeleteItem(index){
const action = {
type: ‘delete_item‘,
index: index
}
store.dispatch(action)
}
}
import {createStore} from'redux';
import reducer from ‘./reducer‘;
const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
export default store;
View Code
import {createStore} from'redux';
import reducer from ‘./reducer‘;
const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
export default store;
const defaultState = {
inputValue: ‘’,
list:[]
}
export default (state = defaultState, action) => {
if (action.type === ‘input_change‘){
let newState = JSON.parse(JSON.stringify(state));
newState.inputValue = action.value;
return newState;
}
if (action.type === ‘add_item‘){
let newState = JSON.parse(JSON.stringify(state));
newState.list.push(newState.inputValue);
newState.inputValue = ‘‘;
return newState;
}
if (action.type === ‘delete_item‘){
let newState = JSON.parse(JSON.stringify(state));
newState.list.splice(action.index, 1)
return newState;
}
return state;
}
View Code
const defaultState = {
inputValue: ‘’,
list:[]
}
export default (state = defaultState, action) => {
if (action.type === ‘input_change‘){
let newState = JSON.parse(JSON.stringify(state));
newState.inputValue = action.value;
return newState;
}
if (action.type === ‘add_item‘){
let newState = JSON.parse(JSON.stringify(state));
newState.list.push(newState.inputValue);
newState.inputValue = ‘‘;
return newState;
}
if (action.type === ‘delete_item‘){
let newState = JSON.parse(JSON.stringify(state));
newState.list.splice(action.index, 1)
return newState;
}
return state;
}