React-Redux使用方法

1.在React项目中使用react-redux,可以让你更方便的使用redux，原理是在index.js中注册app时用一个<Povider>标签嵌套，把你的App.js变Provideer的子组件，将所有的state以props的形式传给<App/>

App.js

import React, { Component } from "react";
import About from "./pages/About"; //About是路由组件
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import store, { persistor } from './store/index'export default class App extends Component {render() {console.log('store', store)return (<Provider store={store}><PersistGate loading={null} persistor={persistor}><About></About></PersistGate></Provider>);}
}

2.创建store文件

createStore:创建一个 Redux store 来以存放应用中所有的 state

applyMiddleware:中间件,在redux里面就是来增强creatStore方法的

compose: 组合函数

redux-persist: 用来实现数据持久化

store/index.js

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import { persistStore, persistReducer } from 'redux-persist'
//  存储机制，可换localStorage, sessionStorage等，当前使用storage
import storage from 'redux-persist/lib/storage';
import rootReducer from './reducers'
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';const initState = 0
const middleware = [thunk]const persistConfig = {key: 'root', // 必须有的storage: storage, // 缓存机制stateReconciler: autoMergeLevel2 // 查看 'Merge Process' 部分的具体情况
}const persistedReducer = persistReducer(persistConfig, rootReducer)const store = createStore(persistedReducer,initState,compose(applyMiddleware(...middleware)),window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)export const persistor = persistStore(store)export default store

4.包含n个action的type常量名称的模块 ,这里只是避免reducers和action的type中的常量不一致

constant/types.js

 export const ADD_NUM = 'ADD_NUM'export const DEL_NUM = 'DEL_NUM'

创建reducers,Reducers是真正实现state数据变化的工作

reducers/numReducer.js

import { ADD_NUM, DEL_NUM } from '../constant/types'const initState = 0const calculate = (state = initState, action) => {let payload = action.payloadswitch (action.type) {case ADD_NUM:state = payload + 1return statecase DEL_NUM:state = payload - 1return statedefault:return state}
}export default calculate

combineReducers 辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用 createStore

reducers/index.js

import { combineReducers } from 'redux'
import numReducer from './numReducer'export default combineReducers({ num: numReducer })

配置异步action

action/numAction.js

import { ADD_NUM, DEL_NUM } from '../constant/types'export const add = item => dispatch => {dispatch({type: ADD_NUM,payload: item})
}export const del = item => dispatch => {dispatch({type: DEL_NUM,payload: item})
}

运用到组件中

import React from 'react'
import {connect} from 'react-redux';
import {add, del} from '../../store/action/numAction';function About(props) {const { add, del, item } = propsconst test = () => { add(item) }const test1 = () => { del(item) }return (<div><h3>我是About的内容</h3><div>{item}</div><button onClick={() => test()}>增加</button><button onClick={() => test1()}>减少</button></div>)
}const mapStateToProps = (state) => {return { item: state.num }
}const mapDispatchToProps = (dispatch) => {return {add(data){ dispatch(add(data)); },del(data){ dispatch(del(data)); }}
}
export default connect(mapStateToProps, mapDispatchToProps)(About);

React-Redux使用方法相关推荐

基于 react, redux 最佳实践构建的 2048
前段时间 React license 的问题闹的沸沸扬扬,搞得 React 社区人心惶惶,好在最终 React 团队听取了社区意见把 license 换成了 MIT.不管 React license ...
React Redux 的一些基本知识点
一.React.createClass 跟 React.Component 的区别在于后者使用了ES6的语法,用constructor构造器来构造默认的属性和状态. 1. React.createCl ...
react实战项目_React实战之React+Redux实现一个天气预报小项目
引言经过一段时间的React学习,React和Vue的开发确实有很大的不同,但是都是MVVM框架,因此上手没有很大的难度,这次用React+Redux开发一个天气预报小项目.源码地址:https:/ ...
React+Redux仿Web追书神器
引言由于 10 月份做的 React Native 项目没有使用到 Redux 等库,写了一段时间想深入学习 React,有个想法想做个 demo 练手下,那时候其实还没想好要做哪一个类型的,也看了 ...
react+redux+generation-modation脚手架搭建一个todolist
TodoList 1. 编写actions.js 2. 分析state 试着拆分成多个reducer 3. 了解store 4. 了解redux数据流生命周期 5. 分析容器组件和展示组件搞清楚,数 ...
webpack+react+redux+es6开发模式---续
一.前言之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...
webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
一个 react+redux 工程实例
在前几天的一篇文章中总结部分提到了学习过程中基础的重要性.当然,并不是不支持大家学习新的框架,这篇文章就分享一下react+redux工程实例. 一直在学习研究react.js,前前后后做了几次分享. ...
我的第一个 react redux demo
最近学习react redux,先前看过了几本书和一些博客之类的,感觉还不错,比如<深入浅出react和redux>,<React全栈++Redux+Flux+webpack+Bab ...
使用React的static方法实现同构以及同构的常见问题
代码地址请在github查看,假设有新内容.我会定时更新.也欢迎您star,issue,共同进步 1.我们服务端渲染数据从何而来 1.1 怎样写出同构的组件服务端生成HTML结构有时候并不完好.有时 ...

React-Redux使用方法

React-Redux使用方法相关推荐

最新文章

热门文章