Redux基本使用(1)

admin 发布于 REACT

react-redux是redux作者给react提供的一个封装库,可以方便的将redux中的状态和方法注入到react组件中,redux中store相当于数据库,state相当于数据库的数据,dispatch(action)提供了对数据的修改方法,react-redux完成数据订阅,监测store中状态的变化并渲染更新后的react组件

redux流程图

(1)安装redux和react-redux

npm i redux -S
npm i react-redux -S
(2)使用方法

1、入口文件中store创建,并在入口文件index.js对sotre挂载

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {createStore} from 'redux'//创建store的方法
import {Provider} from "react-redux"//让store挂载到页面用的组件
//创建Reducers,用来修改store的值
 let countReducers=function(state={count:0},action){//此处定义的state必须是对象格式
    console.log(action)//此处可以接受到不同页面触发的dispatch内容
    //注意必须要放回对应数据
    switch (action.type) {
        case "ADD"://dispatch里面传递的type类型
            state.count+=parseInt(action.data)
            console.log(state.count)
            return {...state,...action.data}//此处因为state是对像(引用类型)用浅拷贝来修改值
        default: return state;//默认时也需要导出对应state
    }
}
let store=createStore(countReducers)//创建store,接收Reducers
ReactDOM.render(
    <Provider store={store}>//provider用来结束store的值
        <React.StrictMode>
             <App />
        </React.StrictMode>
    </Provider>
        ,
  document.getElementById('root')
);

2、在需要用store的页面使用

import React from 'react'
import {connect} from 'react-redux';//用connect来连接react和redux
class  Count extends React.Component{
    addNum(){
        //用来派发事件,函数需要传递对象格式,type字段必填
        this.props.dispatch({type:'ADD',data:1})
    }
    render(){
        return( <div>
                    {this.props.state.count}//接收connect中返回的state值
                    <button onClick={()=>this.addNum()}>+</button>
                </div>
            )
    }
}
export  default connect(state=>{
    return {
        state
    }
})(Count)

这个是基本使用方式,可以对不同内容以模块方式进行代码分类。


226浏览量 · 0评论 · 2020-04-23 02:58:05

全部评论  0

注册登录 进行评论

热门专题

更多专题