Redux使用实例

最新推荐文章于 2021-10-29 18:33:28 发布

原创最新推荐文章于 2021-10-29 18:33:28 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

React学习笔记专栏收录该内容

5 篇文章

订阅专栏

//index.js
import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import App from './components/app'
import {createStore} from 'redux'
import {counter} from './redux/reducers'
// 生成一个store对象
const store = createStore(counter); // 内部会第一次调用reducer函数得到state
console.log(store,store.getState());
function render(){
    ReactDOM.render(<App store={store}/>,document.getElementById('root'));
}
// 初始化渲染
render();
// 订阅监听。store中的状态变化了，就自动重绘。
store.subscribe(render);

// /redux/reducer.js
// 包含n个reducer函数的模块 整个文件作为对象
import {INCREMENT,DECREMENT} from './action-type'
export function counter(state = 0,action){
    console.log('counter()',state,action)
    switch(action.type){
        case 'INCREMENT' :
            return state + action.data;
        case DECREMENT:
            return state - action.data;
        default:
            return state;
    }
}
export function xxx(){
}```

```javascript
// /components/app.jsx
import React, {Component} from 'react'
import {INCREMENT,DECREMENT} from '../redux/action-type'
export default class App extends Component{
    state = {
        count: 0
    }
    increment = () =>{
        //1.得到选择增加数量
        const number = this.select.value*1;
        //2. 调用store的方法更新状态
        this.props.store.dispatch({type: 'INCREMENT',data:number});
    }
    decrement = () =>{
        //1.得到选择增加数量
        const number = this.select.value*1;
        this.props.store.dispatch({type: DECREMENT,data:number});
    }
    incrementIfOdd = () =>{
        //1.得到选择增加数量
        const number = this.select.value*1;
        //2. 得到原本的count状态，并计算新的count
        const count = this.props.store.getState();
        // 判断，满足条件才更新
        if(count %2 ===1){
            //3. 更新状态
            this.props.store.dispatch({type: 'INCREMENT',data:number});
        }
    }
    incrementIfAsync = () =>{
        //1.得到选择增加数量
        const number = this.select.value*1;
        setTimeout(()=>{
            //3. 更新状态
            this.props.store.dispatch({type: 'INCREMENT',data:number});
        },1000)
    }
    render(){
        const count = this.props.store.getState();
        //debugger
        return (
            <div>
                <p>click {count} times</p>
                <div>
                    <select ref={select => this.select = select}>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>&nbsp;
                    <button onClick={this.increment}>+</button>
                    <button onClick={this.decrement}>-</button>
                    <button onClick={this.incrementIfOdd}>increment if odd</button>
                    <button onClick={this.incrementIfAsync}>increment if async</button>
                </div>
            </div>
        )
    }
} ```