react-step-by-step之redux详细注释
前言
- 很是感谢小伙伴的支持和鼓励，从博客园转战到掘金，没想到获得这么多的小伙伴的支持，在此表示十分的感谢，大家鼓励我是写详细注释的教程的巨大动力
- 今天为你们带来，react-redux的详细教程
- 没有用脚手架，手动配置webpack各类配置文件，以一个计数器的案例来讲明
- 重要的事说三遍，注释，注释，详细注释
- react-redux 我就不介绍了，直接上代码（爱都在代码里）
案例搭建
- 项目目录
- webpack配置
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.join(__dirname, './src/main.js'),//入口配置
output: {//出口配置
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
devServer: {
open: true,
port: 3000,
// 添加反向代理的配置
// https://webpack.js.org/configuration/dev-server/#devserver-proxy
// https://github.com/chimurai/http-proxy-middleware#http-proxy-options
// http://www.jianshu.com/p/3bdff821f859
proxy: {
// 使用：/api/movie/in_theaters
// 访问 ‘/api/movie/in_theaters’ ==> 'https://api.douban.com/v2/movie/in_theaters'
// '/api' 的做用：用来告诉 webpack-dev-server 以 /api 开头的全部请求
// 都由你来代理
'/api': {
// 代理的目标服务器地址
target: 'https://api.douban.com/v2',
// https请求须要该设置
secure: false,
// 必须设置该项
changeOrigin: true,
// '/api/movie/in_theaters' 路径重写为：'/movie/in_theaters'
// 若是没有该配置，最终的接口地址为：https://api.douban.com/v2/api/movie/in_theaters
pathRewrite: { '^/api': '' }
}
}
},
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.(png|jpg|jpeg|gif)$/, use: 'url-loader' },
// 配置解析 JSX/ES6 语法的loader
{ test: /\.js/, use: 'babel-loader', exclude: /node_modules/ }
]
},
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html')
})
]
}
复制代码
- redux的基本概念，和vue的vuex的思想相似，状态管理。属于换汤不换药
/* redux 状态管理工具 三个核心概念： 1 action 动做、行为 用来描述要执行什么任务，或者说：action提出来了一个想法 action是一个 JS 对象 必须得提供一个type属性 type属性的值采用全大写字母的方式来表示，可使用下划线来分割多个单词 const addTodo = { type: 'ADD_TODO', name: '学习Redux' } actionCreator: 动做建立器，其实就是一个函数，这个函数返回 action const addTodo = (name) => ({ type: 'ADD_TODO', name }) addTodo('学习redux') ===> { type: 'ADD_TODO', name: '学习redux' } addTodo('复习 react') ===> { type: 'ADD_TODO', name: '复习 react' } 2 reducer 做用： 根据指定的 action 来实现要完成的动态 语法：(state, action) => newState 它其实是一个纯函数 注意：不要直接修改参数state，而应该根据传入的state（上一个state），来获得最新的状态 3 store 在一个 redux 应用中只应该提供一个 store store 提供了state； 也提供了操做state的方法 */
复制代码
- redux的基本使用
/* redux 的基本使用： 1 安装： npm i -S redux 2 导入redux 3 调用 createStore 方法来建立store */
import { createStore } from 'redux'
// 建立reducer
const counter = (state = 0, action) => {
console.log(state, action)
switch (action.type) {
case 'INCREMENT':
// state++
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// 建立动做
// 计数器加1的动做：
const increment = () => ({
type: 'INCREMENT'
})
// 计数器减1的动做：
const decrement = () => ({
type: 'DECREMENT'
})
// 建立store
const store = createStore(counter)
// 获取状态
console.log('获取状态：', store.getState())
// 分发任务
store.dispatch(increment())
// store.dispatch({ type: 'INCREMENT' })
console.log('新状态为：', store.getState())
复制代码
- redux中的subscribe
/* redux 的基本使用： 1 安装： npm i -S redux 2 导入redux 3 调用 createStore 方法来建立store */
import { createStore } from 'redux'
// 建立reducer
const counter = (state = 0, action) => {
console.log(state, action)
switch (action.type) {
case 'INCREMENT':
// state++
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// 建立动做
// 计数器加1的动做：
const increment = () => ({
type: 'INCREMENT'
})
// 计数器减1的动做：
const decrement = () => ({
type: 'DECREMENT'
})
// 建立store
const store = createStore(counter)
// 监听store中state的改变：
const unsubscribe = store.subscribe(() => {
console.log('新状态为：', store.getState())
})
// 获取状态
console.log('获取状态：', store.getState())
// 分发任务
store.dispatch(increment())
// store.dispatch({ type: 'INCREMENT' })
// 分发其余任务：
store.dispatch(increment())
// 在此处调用该方法，表示取消监听state的改变
// 取消后，state再发生改变也不会再被打印内容出来了
unsubscribe()
store.dispatch(increment())
复制代码
- Counter计数器案例
/* redux 的基本使用： 1 安装： npm i -S redux 2 导入redux 3 调用 createStore 方法来建立store */
import { createStore } from 'redux'
import React from 'react'
import ReactDOM from 'react-dom'
// 建立reducer
const counter = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
// state++
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// 建立动做
// 计数器加1的动做：
const increment = () => ({
type: 'INCREMENT'
})
// 计数器减1的动做：
const decrement = () => ({
type: 'DECREMENT'
})
// 建立store
const store = createStore(counter)
store.subscribe(() => {
// console.log('当前状态：', store.getState())
render()
})
// 建立组件：
const Counter = () => (
<div> <h1> 当前值： {store.getState()} </h1> <button onClick={() => store.dispatch(increment())}>+1</button> <button onClick={() => store.dispatch(decrement())}>-1</button> </div>
)
const render = () => {
// 渲染组件
ReactDOM.render(<Counter />, document.getElementById('app')) } render() 复制代码
- class组件forceUpdate更新state
/* redux 的基本使用： 1 安装： npm i -S redux 2 导入redux 3 调用 createStore 方法来建立store */
import { createStore } from 'redux'
import React from 'react'
import ReactDOM from 'react-dom'
// 建立reducer
const counter = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
// state++
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// 建立动做
// 计数器加1的动做：
const increment = () => ({
type: 'INCREMENT'
})
// 计数器减1的动做：
const decrement = () => ({
type: 'DECREMENT'
})
// 建立store
const store = createStore(counter)
// 建立组件：
class Counter extends React.Component {
componentDidMount() {
// 监听状态的改变
this.unsubscribe = this.props.store.subscribe(() => {
// 调用该方法强制组件从新渲染
this.forceUpdate()
})
}
// 组件卸载时，取消state的监听
componentWillUnmount() {
this.unsubscribe()
}
render() {
const { store } = this.props
return (
<div> <h1> 当前值： {store.getState()} </h1> <button onClick={() => store.dispatch(increment())}>+1</button> <button onClick={() => store.dispatch(decrement())}>-1</button> </div>
)
}
}
ReactDOM.render(<Counter store={store} />, document.getElementById('app')) 复制代码
- react-redux包的做用说明（理论知识）
/* redux 的基本使用： 1 安装： npm i -S redux 2 导入redux 3 调用 createStore 方法来建立store */
import { createStore } from 'redux'
import React from 'react'
import ReactDOM from 'react-dom'
// 建立reducer
const counter = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
// state++
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// 建立动做
// 计数器加1的动做：
const increment = () => ({
type: 'INCREMENT'
})
// 计数器减1的动做：
const decrement = () => ({
type: 'DECREMENT'
})
// 建立store
const store = createStore(counter)
// 问题：
//
// 使用 class 组件中的 forceUpdate() 方法，不是一个通用的解决方案
// 只能在 class 组件中，而函数组件中，只能使用从新渲染整个应用的方式
// 来将 redux 中state的改变，从新渲染到页面中
//
// 咱们应该使用一种更加通用的方式，来将react和redux配合到一块儿使用
// react-redux 包负责将 react 和 redux 关联到一块儿使用
// 解决了两个问题：
// 1 react组件如何触发一个action动做
// 也就是如何正确调用 store.dispatch
// 2 store中state改变了，如何将最新的state从新渲染在组件中
// 对于上述第一个问题： react-redux包中提供了一个方法 connect 用来链接react和redux
// 经过 connect 方法，能够包装一个现有的组件（class组件或函数组件），为该组件提供组件
// 内部须要用到的 state 或 操做state的方法
//
// 对于上述第二个问题： 基于react中的单向数据流，父组件提供须要的数据，经过 props 将
// 这些state传递给子组件，子组件中就能够接收到这些数据并展现在页面中了。当父组件中的数据
// 发生改变的时候，由于 单向数据流 的缘由，因此，改变后的state又会从新流动到子组件中
// 所以，子组件就接收到了更新后的数据，就会更新组件内容。这样在页面中就看到数据的改变了
// 咱们须要使用 react-redux 中提供的父组件（Provider），来包裹咱们本身写的组件
// 建立组件：
class Counter extends React.Component {
componentDidMount() {
// 监听状态的改变
this.unsubscribe = this.props.store.subscribe(() => {
// 调用该方法强制组件从新渲染
this.forceUpdate()
})
}
// 组件卸载时，取消state的监听
componentWillUnmount() {
this.unsubscribe()
}
render() {
const { store } = this.props
return (
<div> <h1> 当前值： {store.getState()} </h1> <button onClick={() => store.dispatch(increment())}>+1</button> <button onClick={() => store.dispatch(decrement())}>-1</button> </div>
)
}
}
ReactDOM.render(<Counter store={store} />, document.getElementById('app')) 复制代码
- react-redux包的基本使用
/* react-redux 的基本使用： 1 安装：npm i -S react-redux 2 从 react-redux 包中导入两个内容： Provider 和 connect 3 使用 Provider 组件包裹整个react应用 4 使用 connect 包装咱们本身的组件，而且传递组件中要使用的 state 和 dispatch 等方法 */
import { createStore } from 'redux'
import React from 'react'
import ReactDOM from 'react-dom'
// 导入react-redux
import { Provider, connect } from 'react-redux'
// 建立reducer
const counter = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
// state++
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// 建立动做
// 计数器加1的动做：
const increment = () => ({
type: 'INCREMENT'
})
// 计数器减1的动做：
const decrement = () => ({
type: 'DECREMENT'
})
// 建立store
const store = createStore(counter)
store.subscribe(() => {
console.log('state: ', store.getState())
})
// 问题：
//
// 使用 class 组件中的 forceUpdate() 方法，不是一个通用的解决方案
// 只能在 class 组件中，而函数组件中，只能使用从新渲染整个应用的方式
// 来将 redux 中state的改变，从新渲染到页面中
//
// 咱们应该使用一种更加通用的方式，来将react和redux配合到一块儿使用
// react-redux 包负责将 react 和 redux 关联到一块儿使用
// 解决了两个问题：
// 1 react组件如何触发一个action动做
// 也就是如何正确调用 store.dispatch
// 2 store中state改变了，如何将最新的state从新渲染在组件中
// 对于上述第一个问题： react-redux包中提供了一个方法 connect 用来链接react和redux
// 经过 connect 方法，能够包装一个现有的组件（class组件或函数组件），为该组件提供组件
// 内部须要用到的 state 或 操做state的方法
//
// 对于上述第二个问题： 基于react中的单向数据流，父组件提供须要的数据，经过 props 将
// 这些state传递给子组件，子组件中就能够接收到这些数据并展现在页面中了。当父组件中的数据
// 发生改变的时候，由于 单向数据流 的缘由，因此，改变后的state又会从新流动到子组件中
// 所以，子组件就接收到了更新后的数据，就会更新组件内容。这样在页面中就看到数据的改变了
// 咱们须要使用 react-redux 中提供的父组件（Provider），来包裹咱们本身写的组件
// 建立组件：
const Counter = props => {
console.log('Counter 组件props：', props)
const { dispatch, count } = props
return (
<div> <h1> 当前值： {count} </h1> <button onClick={() => dispatch(increment())}>+1</button> <button onClick={() => dispatch(decrement())}>-1</button> </div>
)
}
// 为connect方法提供一个参数，用来在组件中获取到redux中提供的数据
// 方法的做用：将 redux 中的state 转化为传递给组件的 props
const mapStateToProps = state => {
console.log('mapStateToProps:', state)
// 经过返回值将redux中的state传递给组件
return {
// count 属性，就表示：传递给组件 Counter 的数据
count: state
}
}
// 若是组件中要用到 redux 中提供的state或dispatch方法，就使用 connect 来包裹这个组件
// 若是组件不须要使用 redux 中提供的任何内容，就不须要使用 connect 包裹了！！！
// 注意： connect() 方法内部又返回了一个新的方法，使用这个返回的方法来包裹 Counter组件
// 调用 connect() 方法后，会返回一个新的组件
// 新返回组件是 原始组件 的包装，JSX结构与原始组件彻底相同，只不过包装后，组件中
// 就能够获取到 redux 的 state 以及 dispactch 等方法了
const CounterContainer = connect(mapStateToProps)(Counter)
// 使用 Provider 组件包裹整个应用，而且传递 store 属性给这个组件
// store 属性名是固定的
ReactDOM.render(
<Provider store={store}> <CounterContainer /> </Provider>,
document.getElementById('app')
)
复制代码
- react-redux的使用说明
import { createStore } from 'redux'
import React from 'react'
import ReactDOM from 'react-dom'
// 导入react-redux
import { Provider, connect } from 'react-redux'
// 建立reducer
const counter = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
// state++
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// 建立动做
// 计数器加1的动做：
const increment = () => ({
type: 'INCREMENT'
})
// 计数器减1的动做：
const decrement = () => ({
type: 'DECREMENT'
})
// 建立store
const store = createStore(counter)
store.subscribe(() => {
console.log('state: ', store.getState())
})
// 建立组件：
const Counter = props => {
console.log('Counter 组件props：', props)
const { dispatch, count } = props
return (
<div> <h1> 当前值： {count} </h1> <button onClick={() => dispatch(increment())}>+1</button> <button onClick={() => dispatch(decrement())}>-1</button> </div>
)
}
// 3 若是要在被包装的组件中，获取到 redux 中的state，须要提供该方法
const mapStateToProps = state => {
return {
count: state
}
}
// 2 使用 connect 方法包装 Counter 组件
// 包装后在 Counter 组件中，就能够经过 props 获取到 redux 中的 state 和 dispatch
const CounterContainer = connect(mapStateToProps)(Counter)
ReactDOM.render(
// 1 使用Provider组件包裹整个应用
<Provider store={store}>
<CounterContainer /> </Provider>,
document.getElementById('app')
)
复制代码
- react-redux中mapDispatchToProps的使用
import { createStore } from 'redux'
import React from 'react'
import ReactDOM from 'react-dom'
// 导入react-redux
import { Provider, connect } from 'react-redux'
// 建立reducer
const counter = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
// state++
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// 建立动做
// 计数器加1的动做：
const increment = () => ({
type: 'INCREMENT'
})
// 计数器减1的动做：
const decrement = () => ({
type: 'DECREMENT'
})
// 建立store
const store = createStore(counter)
store.subscribe(() => {
console.log('state: ', store.getState())
})
// 建立组件：
const Counter = props => {
console.log('Counter 组件props：', props)
const { count, onIncrement, onDecrement } = props
return (
<div> <h1> 当前值： {count} </h1> <button onClick={onIncrement}>+1</button> <button onClick={onDecrement}>-1</button> </div>
)
}
// 3 若是要在被包装的组件中，获取到 redux 中的state，须要提供该方法
const mapStateToProps = state => {
return {
count: state
}
}
// 4 做用：将 调用dispatch方法的 逻辑代码，经过 props 映射到组件中
// 在组件中，就能够经过 props 获取到传递的方法并使用了
// 说明：若是传递了该方法，在组件中就没法获取到 dispatch ！！！
const mapDispatchToProps = dispatch => {
return {
onIncrement() {
dispatch(increment())
},
onDecrement() {
dispatch(decrement())
}
}
}
// 2 使用 connect 方法包装 Counter 组件
// 包装后在 Counter 组件中，就能够经过 props 获取到 redux 中的 state 和 dispatch
const CounterContainer = connect(
mapStateToProps,
mapDispatchToProps
)(Counter)
ReactDOM.render(
// 1 使用Provider组件包裹整个应用
<Provider store={store}>
<CounterContainer /> </Provider>,
document.getElementById('app')
)
复制代码
结语
- 看完了，敲呗
- github地址[github.com/whylisa/rea…]
系列文章
- [juejin.im/post/5c1609… ]vue-admin详细注释，必须手把手作项目系列之（二）
- [juejin.im/post/5c18db…]vue-admin 详细注释，必须手把手作项目系列之（三）丢到服务器中解决报错
- [juejin.im/post/5c0e45…]vue-admin 详细注释，必须手把手作项目系列之（一）
- [juejin.im/post/5c1e7a…]做为技术官为啥把你pass了
相关文章
- 1. spring 注解详细解释
- 2. Php.ini 中文注释详细
- 3. spring注解详细解释
- 4. SpringMVC学习二：注解之注解详细解释
- 5. 详细：idea如何设置类头注释和方法注释
- 6. 关于idea类注释，方法注释超详细配置。
- 7. IDEA自定义方法注释以及类注释（超详细）
- 8. swagger注释API详细说明
- 9. BST基础教学（详细注释）
- 10. 最详细的的IP报头注释
- 更多相关文章...
- • R 注释 - R 语言教程
- • Rust 注释 - RUST 教程
- • 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解
- • Flink 数据传输及反压详解
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字节跳动21届秋招运营两轮面试经验分享
- 2. Java 3 年，25K 多吗？
- 3. mysql安装部署
- 4. web前端开发中父链和子链方式实现通信
- 5. 3.1.6 spark体系之分布式计算-scala编程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在线
- 8. 在线画图
- 9. devtools热部署
- 10. 编译和链接
欢迎关注本站公众号,获取更多信息
相关文章