在上篇,写了一个redux的简单demo,redux使用,这篇就结合react-redux与实际项目进行结合使用。
加减按钮demo
实现简单的点击加号,点击减号改变数字的项目,demo虽小,五脏俱全;
安装 redux 和 react-redux
npm i redux react-redux
创建react项目 基本操作
npx create-react-app my-app
cd my-app
npm start
再根目录下父组件 index.js中
import { createStore } from 'redux' // 用于创建store
import { Provider } from 'react-redux' // 用于给后代组件提供store
import CounterReducer from './reducer/CounterReducer' // 改变store的方法减速器
// 创建store对象
const store = createStore(CounterReducer)
// store 包含三个方法 subscribe 监听,订阅
// dispatch 派发
// getState 获取状态
store.subscribe(() => {
console.log(store.getState())
})
ReactDOM.render(
<React.StrictMode>
// 使用Provider标签将App包裹 将store传递进去
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
创建reducers/CounterReducer.js
修改state状态必须要使用纯函数
1.函数返回值由参数决定;
2.函数没有任何副作用(不改变原数据)
因此下面使用es6解构赋值的形式
// 初始化state状态
const initState = {
number: 0,
other: ''
}
// 根据type值 来决定操作方法
const Counter = (state = initState, actions) => {
switch (actions.type) {
case 'ADD_NUM':
return {
...state,
number: state.number + actions.value
}
case 'MINUS_NUM':
return {
...state,
number: state.number - actions.value
}
default:
return state;
}
}
export default Counter
在使用的组件中 Counter.js
import React from 'react';
// 引入connect 连接 Provider传递下来的store
import { connect } from 'react-redux'
class App extends React.Component {
render() {
// 下面的对象都在这个 props中
const { number, add, minus } = this.props
return(
<div style={{textAlign:"center"}}>
<h1>{number}</h1>
<button onClick={() => add(10)}>+++</button>
<button onClick={() => minus(5)}>---</button>
</div>
)
}
}
// 使用mapStateToProps方法 将state的number 赋值给 props的number中
const mapStateToProps = (state, ownProps) => {
// ownProps 等于 props,此处没使用
console.log(ownProps)
return {
number: state.number
}
}
// 使用mapDispatchToProps方法 将add minus 赋值到 props上
const mapDispatchToProps = (dispatch) => {
return {
add: (value) => dispatch({type: 'ADD_NUM', value}), // 根据类型派发
minus: (value) => dispatch({type: 'MINUS_NUM', value})
}
}
// connect 第一参数 两者不能颠倒 否则报错
export default connect(mapStateToProps, mapDispatchToProps)(App)
以上便完成了 react-redux的demo
下一步,进一步优化下,将dispatch的方法提取出来, 创建actions/counter.js
export const add = (value) => {
return {
type: 'ADD_NUM',
value
}
}
export const minus = (value) => {
return {
type: 'MINUS_NUM',
value
}
}
组件的Counter.js重新引入,并修改mapDispatchToProps方法
import { add, minus } from '../actions/counter'
const mapDispatchToProps = (dispatch) => {
return {
add: () => dispatch(add()),
minus: () => dispatch(minus())
}
}
完成~~~
本人react菜鸟一枚,有什么错误,麻烦各位大佬提出,Thanks!