阅读 185

Redux 、react-redux

Redux:如果你不知道是否需要 Redux,那就是不需要它。

redux类似于vuejs的vuex,是react的数据管理中心。

  • redux上手

    • 首先我们需要安装redux

      npm install redux --save
      复制代码
  • Store

    redux 中我们首先需要理解store,这个就是帮我们管理数据的政委,Store 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。

  • State

    Store对象包含所有数据。如果想得到某个时点的数据,就要对 Store 生成快照。这种时点的数据集合,就叫做 State。当前时刻的 State,可以通过store.getState()拿到

  • Action

    State 的变化,会导致 View 的变化。但是,用户不能够直接改变State,只能操控View所以,State 的变化必须是 View 导致的。Action 就是 View 发出的通知,表示 State 应该要发生变化了。

    Action 是一个对象。其中的type属性是必须的,表示 Action 的名称。

  • Dispatch

    功能就是我们View层要发出Action,必须要通过dispatch来进行触发

  • Reducer

    Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

    Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。

  • 对redux通俗理解

    就拿我们 * 东来说,发货都是从仓库发出,仓库就是redux的store,store中的state是存储数据也就是相当于仓库的货物,当我们从*东软件上下单 就是我们触发一个dispatch,然后 *东后台接到订单通知(action)仓库,相当我们下单买的货物的通知到达仓库(这个过程是我们和货物不能直接接触的,如果能接触货物早就偷光了哈哈哈),通知到仓库后,仓库里边有工人(reducer)来进行处理发货一系列的动作,发出货物之后,仓库货物的数据(state数据)就变了,货物到我们手里(view也就变了)

  • 简单加减按钮的实现
    //  store.js
    import {createStore} from 'redux'
    const counterReducer = (state=0,action)=>{ // 设置默认值
        switch (action.type) {
            case 'add':
                return state+1 ;   // 一定是返回新的state 而不是像vue直接修改 
            case 'minus':
                return state-1 ;
            default:
                return state
        }
    };
    const store = createStore(counterReducer);
    export default store
    
    复制代码
    // App.js
    class App extends Component {
        render() {
            return (
                <div className="App">
               {/*getState()返回当前的state树它与 store 的最后一个 reducer 返回值相同。*/}
                    <p>{store.getState()}</p>
                    <Button type={"primary"} onClick={()=>store.dispatch({type:"add"})} >增加+</Button>
                    <Button type={"primary"} onClick={()=>store.dispatch({type:"minus"})}>减少-</Button>
                </div>
            );
        }
    }
    复制代码
    // index.js 中的render方法需要自己手动订阅监听 
    import store from "./store";
    const render =()=>{
        ReactDOM.render(
            <App />,
            document.getElementById('root')
        );
    
    };
    render(); 
    store.subscribe(render); // 每次 dispatch也就是state发生变化都需要render一次
    复制代码
  • react-redux

    上边使用redux 每次都需要render麻烦且不优雅,使用react-redux更好,不用手动再去监听

    npm insatll react-redux --save
    复制代码
    • Provider顶级组件,来提供数据,
    • connect高阶组件,提供数据和方法,把组件的状态映射到属性之上,然后只用props来进行调用
    • 看看react-redux如何实现上边的功能,
    // index.js  不需要手动再去监听 ,直接使用Provider进行包裹,自动监听数据了
    import store from "./store";
    import {Provider} from 'react-redux'
    ReactDOM.render(
        // 外层包一层Provider ,提供数据和组件间的数据传递一样
        <Provider store={store}>
            <App />
        </Provider>,
        document.getElementById('root')
    );
    复制代码

    Provider将数据传递进来数据任何地方想使用就用connect链接,这样App和redux就链接起来了

    // app.js
    class App extends Component {
        render() {
            return (
                <div className="App">
                    <p>{this.props.num}</p>  // dispatch 直接写对应的方法 
                    <Button type={"primary"} onClick={()=>this.props.add()}>增加+</Button>
                    <Button type={"primary"} onClick={()=>this.props.minus()}>减少-</Button>
                </div>
            );
        }
    }
    const mapStateToProps = (state) =>{ // 它把状态映射到属性之上 所以上边使用this.props
        return {
            num:state
        }
    };
    const mapDispatchToProps = dispatch=>{
        return{
            add:()=>dispatch({type:"add"}),
            minus:()=>dispatch({type:"minus"})
        }
    }
    
    App = connect(mapStateToProps,mapDispatchToProps)(App)
    复制代码
  • react-redux中的connect 使用装饰器写法

    上边的connect 使用的高阶组件来声明需要的state里边的数据和方法

    //App.js
    @connect(
        // Es6语法
        //state=>({num:state}),  
       	// 读数据
        state=>{
            return {
                num:state
            }
        },
        //除了ES6语法简写外 同步的dispatch可以进行简写
        //写数据,要调用的dispatch 并且这些方法会传递到props中
        // add:()=>({type:"add",step:2}), 可以传递多个参数,但第一参数是修改数据的请求
        {
            add:()=>({type:"add"}),
            minus:()=>({type:"minus"})
        }
        // dispatch=>{
        //     return{
        //         add:()=>dispatch({type:"add"}),
        //         minus:()=>dispatch({type:"minus"})
        //     }
        // }
    )
    复制代码
  • redux默认都是同步的操作,这样异步任务就需要使用 中间件 来完成

    为什么异步任务只能通过中间件来完成?

    1. Reducer :纯函数,只能承担计算State的功能,不适合承担其他功能,理论上纯函数不能进行读写操作
    2. View:与State一一对应,可以看做State的视觉层,也不适合承担其他功能
    3. Action:存放数据的对象,即消息的载体,只能被别人操控,自己并不能进行任何操作
    4. 实际的reducer和action store都需要独立拆分文件

    所以要进行异步任务的dispatch请求,到达Reducer之前都需要经过中间件的处理。

    我们试一下redux-logger和redux-thunk(异步操作) 两个中间件

    //store.js
    import {createStore,applyMiddleware} from 'redux' // applyMiddleware 是使用中间件
    import logger from 'redux-logger'
    import thunk from 'redux-thunk'
    const counterReducer = (state=0,action)=>{ // 设置默认值
        switch (action.type) {
            case 'add':
                return state+1 ;
            case 'minus':
                return state-1 ;
            default:
                return state
        }
    };
    const store = createStore(counterReducer,applyMiddleware(logger,thunk));
    复制代码
    @connect(
        state=>{
            return {
                num:state
            }
        },
        {
            add:()=>({type:"add"}),
            minus:()=>({type:"minus"}),
            asyncAdd:()=>dispatch=>{   // 延时加1。模拟异步任务
                setTimeout(()=>{
                    dispatch({type:"add"})
                },2000)
            }
        }
    )
    复制代码
  • 多个reducer
    //store.js
    import {createStore,applyMiddleware,combineReducers} from 'redux'
    const store = createStore(
        combineReducers({counterReducer,numberReducer}), // 假如我们还有一个numberReducer
        applyMiddleware(logger,thunk)
    );
    export default store
    
    复制代码
  • 抽离Reducer 和Action
    // 新建 reducer.redux.js
    const counterReducer = (state=0,action)=>{ // 设置默认值
        switch (action.type) {
            case 'add':
                return state+1 ;
            case 'minus':
                return state-1 ;
            default:
                return state
        }
    };
    const add= ()=>({type:"add"});
    const minus=()=>({type:"minus"});
    // 支持这种返回一个函数的写法,就是因为用了thunk
    const asyncAdd =()=>dispatch=>{
        setTimeout(()=>{
            dispatch({type:"add"})
        },2000)
    };
    export {counterReducer,add,minus,asyncAdd}
    
    复制代码
    import {Provider} from 'react-redux'
    import * as serviceWorker from './serviceWorker';
    import {createStore,applyMiddleware} from 'redux'
    import logger from 'redux-logger'
    import thunk from 'redux-thunk'
    import {counterReducer} from "./couter.redux";
    // 新建store 第一个参数reducer 第二个参数中间件
    const store = createStore(counterReducer,applyMiddleware(logger,thunk));
    //import store from "./store";       store.js文件就没有什么用了
    ReactDOM.render(
        // 外层包一层Provider ,提供数据和组件间的数据传递一样
        <Provider store={store}>
            <App />
        </Provider>,
        document.getElementById('root')
    );
    
    复制代码
    //  App.js 直接引入reducer.redux.js的方法
    import {add,minus,asyncAdd} from "./couter.redux";
    @connect(
        state=>{
            return {
                num:state
            }
        },
        {add,minus,asyncAdd}  //
    )
    复制代码

文章分类
前端
文章标签