Redux是react中进行state状态管理的JS库(并不是react插件),一般是管理多个组件中共享数据状态。这个是和Vuex是一样的。
首先明确一点,Redux 是一个有用的架构,但不是非用不可。事实上,大多数情况,你可以不用它,只用 React 就够了。
曾经有人说过这样一句话:
"如果你不知道是否需要 Redux,那就是不需要它。"
"只有遇到 React 实在解决不了的问题,你才需要 Redux 。"
什么是Redux?
Web 应用是一个状态机,视图与状态是一一对应的。
所有的状态,保存在一个对象里面。
怎么用Redux?
首先安装redux
npm install redux --save
创建一个文件夹store创建index.js文件
代码如下:
import {createStore} from 'redux'
import reducer from "./reducer"
const store=createStore(reducer)
export default store
再在该文件夹下创建一个reducer.js文件
var initState = {
//状态
title:"hello redux",
cart:['react',"vue"]
}
function reducer(state=initState,action){
switch(action.type){
//方法
case 'editTitle':
return Object.assign({},state,{
title:action.data
})
case "add":
return Object.assign({},state,{
cart:['123']
})
//默认返回值
default:
return state
}
}
export default reducer
里面可以放状态和一些方法
在App组件中获取redux状态值
import React, { Component } from 'react'
import Store from "../../store/index"
export default class App extends Component {
static propTypes = {
}
constructor(){
super()
var s = Store.getState()//获取状态
this.state={
s
}
Store.subscribe(this.update.bind(this)) // 把update方法注册到监听器 每次状态变化后 调用此方法
}
update(){
var s = Store.getState()
this.setState({s})
}
render() {
return (
<div>
{ this.state.s.title }
<ul>
{
this.state.s.cart.map((item,index)=>{
return <li key={ index } > { item } </li>
})
}
</ul>
</div>
)
}
}
首先引入文件的方法,通过getstate获取之后放到this.state状态值里面
subscribe是一个监听器 监听到数据发生变化之后自动触发定义的update方法 触发之后修改this.state状态值,然后在return状态渲染数据。
触发redux方法 代码如下:
import React, { Component } from 'react'
import Store from "../../store/index"
export default class App extends Component {
static propTypes = {
}
constructor(){
super()
var s = Store.getState()
this.state={
s
}
Store.subscribe(this.update.bind(this)) // 把update方法注册到监听器 每次状态变化后 调用此方法
}
update(){
var s = Store.getState()
this.setState({s})
}
edit(){
Store.dispatch({type:"editTitle",data:"rrrrrrrrrrrrrrrrrrr"})
}
add(){
Store.dispatch({type:"add"})
}
render() {
return (
<div>
{ this.state.s.title }
<ul>
{
this.state.s.cart.map((item,index)=>{
return <li key={ index } > { item } </li>
})
}
</ul>
<input type="button" value="修改" onClick={ this.edit.bind(this) } />
<input type="button" value="添加" onClick={ this.add.bind(this) } />
</div>
)
}
}
在上面代码的基础上添加了两个按钮通过点击事件触发两个方法,通过dispatch触发redux文件里定义的方法type是方法名,data是值
以上是redux的基本用法。