React状态管理 reduxreact-redux
begin enjoy👇

六 React

redux

  • 状态模式管理库(实现react中数据共享)
  • 官方的是:flux
  • redux 是第三方的
  • redux英文
  • redux中文
  • npm 安装 npm install --save redux
  • cdn https://unpkg.com/redux@4.0.1/dist/redux.js

redux核心概念

  • store 存储数据
  • Reducer 普通函数(不能有异步操作),接收上一次的state以及用户的行为action产生一个新的 state
  • Action 普通对象,记录用户行为以及传输的参数

redux 使用

//1. 创建 Reducer
function myReducer(state=0,action) {
    switch (action.type) {
        case 'ADD':
            return state+1
            break;
        case 'SUB':
            return state-1
            break;
        default:
            return state
    }
}

// 2. 创建 store
// 参数1:创建该容器的Reducer
// 参数2:初始状态值(可选的)
const store = Redux.createStore(myReducer,10)

// 3. 监听 store中数据变化 (可以替代this.forceUpdate()刷新界面)
// 返回值:调用返回值,可以取消监听
const unSubscribe =  store.subscribe(()=>{
    console.log('a> '+ store.getState())
    //数据变化后再次渲染到界面
    ReactDOM.render(<App></App>,  document.querySelector('#root'))
    
})
//取消监听
// unSubscribe() 

class App extends React.Component{
    add(){
        store.dispatch({type:'ADD'})
        // this.forceUpdate() //强制更新视图
    }
    sub(){
        store.dispatch({type:'SUB'})
        // this.forceUpdate()
    }
    render() {
        return(<div>
            <h2>Redux</h2>
            {/* 将 redux 中数据渲染到界面 */}
            <p>{store.getState()}</p>
            <button onClick={this.add.bind(this)}>递增</button>
            <button onClick={this.sub.bind(this)}>递减</button>
        </div>)
    }
}
ReactDOM.render(<App></App>, document.querySelector('#root'))

Reducers 合并

  • 调用 Redux.combineReducers() 将多个合并为一个
let rootReducers =  Redux.combineReducers({
    taskList, totalCount
})
  • 使用合并过的 Reducers 需要加上合并时的 Reducers 名称。
store.getState().taskList

合并后 Reducers 后 相关 type 的 Reducers 都会被触发。

react 与 redux 结合使用

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.0.3/react-redux.js"></script>
  • react-redux 将 react 与 redux 结合在一起

要使用 react-redux 需要先安装并引入 redux

react-redux 核心

  1. Provider 组件,用户于挂载 redux 对象,Provider所包含的所有组件都可以获取到 store
    <Provider store={}>
        ...在这里写组件,必须要有根元素
    </Provider>
    
  2. 普通组件通过connect 连接可以使用 store中数据
    const NewMyComponent = ReactRedux.connect(mapStateToProps,mapDispatchToProps)(MyComponent)
    

react-redux 使用

// 创建 Reducer
const count=(state=0,action)=>{
    switch (action.type) {
        case 'ADD':
            return state + 1 
        case 'SUB':
            return state - 1 
        default:
            return state
    }
}
// 合并reducer
const rootReducers =  Redux.combineReducers({ count })
// 创建 store
const store = Redux.createStore(rootReducers)

// 创建要使用 使用react-redux的组件
class MyComponent extends React.Component{
    render(){
        return (<div>
            <h2>{this.props.title}</h2>
            <h6>{ this.props.count }</h6>
            <button onClick={this.props.add}>按钮</button>
        </div>)
    }
}
// 将state 映射成props,
// 参数2 parentProps 接收父级组件传递的 数据,!可选
const mapStateToProps = function (state,parentProps) {
    return {
        count:state.count,
        title:parentProps.title
    }
}
// 将dispatch 映射为props
// 参数2 parentProps 接收父级组件传递的 数据,!可选
const mapDispatchToProps = function(dispatch,parentProps) {
    return{
        add(){
            dispatch({
                type:'ADD'
            })
        }
    }
}
// 通过高阶组件连接 组件 和 redux
const NewMyComponent = ReactRedux.connect(mapStateToProps,mapDispatchToProps)(MyComponent)

class App extends React.Component{
    render() {
        return(<ReactRedux.Provider store={store}>
            <h2>react-redux</h2>
            <NewMyComponent title='标题'/>
        </ReactRedux.Provider>)
    }
}

ReactDOM.render(<App></App>, document.querySelector('#root'))

posted @ Zycin (非转载 来自个人学习资料整理)