react-redux

2022-09-16 08:32:19 阅读：303 来源： 互联网

标签：number value react store action import redux select

流程和相关api 说明：

新建react 项目；
安装redux:npm install --save redux

redux相关API说明：

redux中包含: createStore(), applyMiddleware(), combineReducers() store对象: getState(), dispatch(), subscribe() react-redux: <Provider>, connect()() redux核心概念(3个) action: 默认是对象(同步action), {type: 'xxx', data: value}, 需要通过对应的actionCreator产生, 它的值也可以是函数(异步action), 需要引入redux-thunk才可以 reducer 根据老的state和指定的action, 返回一个新的state 不能修改老的state store redux最核心的管理对象内部管理着: state和reducer 提供方法: getState(), dispatch(action), subscribe(listener)

demo:

项目模板

app.jsx:

 1 import React, { Component } from 'react';
 2 import {INCREMENT,DECREMENT} from '../redux/action-types'
 3 export default class App extends Component {
 4    
 5     increment=()=>{
 6         debugger
 7         let number = this.select.value*1;//this.select.value是字符串，*1 变成number
 8         this.props.store.dispatch({type:INCREMENT,data:number});
 9     }
10     decrement=()=>{
11         let number = this.select.value*1;//this.select.value是字符串，*1 变成number
12         let count = this.props.store.getState()-number;
13         if(count>=0){
14             this.props.store.dispatch({type:DECREMENT,data:number});
15         }
16         
17     }
18     incrementOdd=()=>{
19         let number = this.select.value*1;//this.select.value是字符串，*1 变成number
20         
21         if(number%2 == 1){
22             this.props.store.dispatch({type:INCREMENT,data:number});
23         }
24     }
25     incrementAsync=()=>{
26         let number = this.select.value*1;//this.select.value是字符串，*1 变成number
27         setTimeout(()=>{
28             this.props.store.dispatch({type:INCREMENT,data:number});
29         },1000)
30     }
31     render() {
32         let count= this.props.store.getState();
33         return (
34             <div>
35                 <p>click {count} item</p>
36                 <div>
37                     <select ref={select=>this.select=select}>
38                         <option vlaue="1">1</option>
39                         <option vlaue="2">2</option>
40                         <option vlaue="3">3</option>
41                     </select>
42                     <button onClick={this.increment}>+</button>
43                     <button onClick={this.decrement}>-</button>
44                     <button onClick={this.incrementOdd}>increment if odd</button>
45                     <button onClick={this.incrementAsync}>increment async</button>
46                 </div>
47             </div>
48 
49         )
50     }
51 }

View Code

action-types.js

1 export const INCREMENT='INCREMENT';
2 
3 export const DECREMENT='DECREMENT';

View Code

reducers.js

 1 /**
 2  * 这是一个包含n个reducer函数的模块
 3  */
 4 import{INCREMENT,DECREMENT} from './action-types' 
 5 
 6 export  function counter(state=0,action){
 7     console.log(state);
 8     console.log(action);
 9 switch(action.type){
10     case INCREMENT:
11         return state+action.data;
12     case DECREMENT:
13     return state-action.data;
14     default:
15         return state
16 }
17 }

View Code

index.js

 1 import React from "react";
 2 import  ReactDOM from "react-dom";
 3 import App from './component/app';
 4 import {createStore} from 'redux'
 5 import {counter} from './redux/reducers'
 6 
 7 //生成一个store对象
 8 const store = createStore(counter);//内部会第一次调用reducer函数得到初始state
 9 function render(){
10     ReactDOM.render(<App store={store}/>,document.getElementById("root"));
11 }
12 //初始化
13 render();
14 //订阅监听，（store 中的状态变化了，就会进行重绘）
15 store.subscribe(function(){
16     render();
17 })

View Code

demo完善版本：

index.js优化：store重新创建一个store.js index.js引入即可

 1 import React from "react";
 2 import  ReactDOM from "react-dom";
 3 import App from './component/app';
 4 import store from "./redux/store";
 5 //生成一个store对象
 6 function render(){
 7     ReactDOM.render(<App store={store}/>,document.getElementById("root"));
 8 }
 9 //初始化
10 render();
11 //订阅监听，（store 中的状态变化了，就会进行重绘）
12 store.subscribe(function(){
13     render();
14 })

View Code

store.js：

1 import {createStore} from 'redux';
2 import {counter} from './reducers';
3 
4 const store = createStore(counter);//内部会第一次调用reducer函数得到初始state
5 export default store;

添加actions.js 来优化app.js中的更新方法;

action.js:

1 /**
2  * 包含所有action creator
3  */
4 import{INCREMENT,DECREMENT} from './action-types'
5 
6 /** */
7 export const increment=(number)=>({type:INCREMENT,data:number}); 
8 
9 export const decrement=(number)=>({type:DECREMENT,data:number});

View Code

app.js:

 1 import React, { Component } from 'react';
 2 import {INCREMENT,DECREMENT} from '../redux/action-types'
 3 import{increment,decrement} from '../redux/actions'//等同于 import * as actions from '../redux/actions'
 4 export default class App extends Component {
 5    
 6     increment=()=>{
 7         debugger
 8         let number = this.select.value*1;//this.select.value是字符串，*1 变成number
 9         this.props.store.dispatch(increment(number));
10     }
11     decrement=()=>{
12         let number = this.select.value*1;//this.select.value是字符串，*1 变成number
13         let count = this.props.store.getState()-number;
14         if(count>=0){
15             this.props.store.dispatch(decrement(number));
16         }
17         
18     }
19     incrementOdd=()=>{
20         let number = this.select.value*1;//this.select.value是字符串，*1 变成number
21         
22         if(number%2 == 1){
23             this.props.store.dispatch(increment(number));
24         }
25     }
26     incrementAsync=()=>{
27         let number = this.select.value*1;//this.select.value是字符串，*1 变成number
28         setTimeout(()=>{
29             this.props.store.dispatch(increment(number));
30         },1000)
31     }
32     render() {
33         let count= this.props.store.getState();
34         return (
35             <div>
36                 <p>click {count} item</p>
37                 <div>
38                     <select ref={select=>this.select=select}>
39                         <option vlaue="1">1</option>
40                         <option vlaue="2">2</option>
41                         <option vlaue="3">3</option>
42                     </select>
43                     <button onClick={this.increment}>+</button>
44                     <button onClick={this.decrement}>-</button>
45                     <button onClick={this.incrementOdd}>increment if odd</button>
46                     <button onClick={this.incrementAsync}>increment async</button>
47                 </div>
48             </div>
49 
50         )
51     }
52 }

View Code

其他文件不必

标签：number,value,react,store,action,import,redux,select
来源： https://www.cnblogs.com/lixiuming521125/p/16698068.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react-redux

流程和相关api 说明：

redux相关API说明：

demo:

demo完善版本：