目录
const store = createStore(reducer)
const mapStateToProps = state=>(obj)
const mapDispatchToProps = obj
简介
redux是一款独立的JavaScript状态管理模块,可以集成到react中进行使用。
安装
npm i react-redux
单独使用
const store = createStore(reducer)
reducer相当于vuex中mutations,用来保存一些修改state值的相关方法。是一个函数接收两个参数,参数1是state,参数2是action,state是改变前的状态值,action是操作state的相关触发方法和参数。
store.subscribe(fun)
fun为一个函数,当state中的数据发生变化时会执行一遍fun函数
store.getState()
获取reducer中switch的default返回的默认值(一般为state)。
store.dispatch(obj)
用于修改state中的数据,obj传给reducer的action,根据obj.type执行修改不同的值。
示例
import { createStore } from 'redux'
const initState = {
name: 'xxx',
age: 18
}
const reducer = (state = initState, action) => {
switch (action.type) {
case 'updateName':
return {
...state,
name: action.name
};
default:
return state;
}
}
//创建store,用来管理所有状态
const store = createStore(reducer)
//读取store中存储的state值
console.log(store.getState())
//{
// name: 'xxx',
// age: 18
//}
store.subscribe(()=>{
//当state的数据发生变化时将执行该函数
console.log('state中的数据发生了变化')
})
//调用reducer的updateName,修改state中name属性。
store.dispatch({type:'updateName',name:'yf'})
//改变了state中的值,会打印出 'state中的数据发生了变化'
结合react使用
使用rcredux自动生成使用redux的类组件。
Provider
包裹在根组件外(这样所有组件都能共享state状态),store属性传入createStore返回的值。
const mapStateToProps = state=>(obj)
在需要使用共享state状态的组件中使用,映射state到props中,类似于vuex中的mapState。obj上面挂载该组件上需要使用的state中的数据。obj上的属性和值,this.props上都有。
const mapDispatchToProps = obj
用于映射dispatch到props中,类似与vuex中mapAction。obj上的属性和值,this.props上都有。
connection
把redux相关操作嵌入到组件中的props中,相当于连接公共的state数据。
示例
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './store' //导入createStore(reducer)
import { Provider } from 'react-redux'
ReactDOM.render(
<React.StrictMode>
<Provider store = { store }>
<App />
</Provider>
</React.StrictMode>
)
store.js
import { createStore } from 'redux'
const initState = {
name: 'xxx',
age: 18
}
const reducer = (state = initState, action) => {
switch (action.type) {
case 'updateName':
return {
...state,
name: action.name
};
default:
return state;
}
}
export default createStore(reducer)
App.js
import React, { Component } from 'react'
import { connect } from 'react-redux'
export class App extends Component {
render() {
console.log(this.props)
// {
// name:'xxx'
// newName:(newName)=>dispatch({type:'updateName',name:newName})
// }
setTimeout(()=>{this.props.newName('yf')},5000)//5秒后名字会变为div中内容有xxx变为yf
return (
<div>{this.props.name}</div>
)
}
}
const mapStateToProps = (state) => ({name:state.name})
const mapDispatchToProps = {
newName:(newName)=>dispatch({type:'updateName',name:newName})
}
export default connect(mapStateToProps, mapDispatchToProps)(App)