redux状态管理及react-redux

所谓redux，其实就是一个独立的库，跟框架没有很大关系，它专注于状态管理，整体只有一个对象，单向数据流处理，核心主要是store,reducer,action,state.下面就来看下应用

首先要下载redux，就是cnpm i redux，然后

import {createStore} from 'redux';

const ADD='增加';
const SUB='减少';
function add(){
    return {type:'增加'}
}

 function sub(){
    return {type:'减少'}
}

function reducer(state=0,action){
    switch(action.type){
        case ADD:
            state=state+1;
            return state;
        case SUB:
            state=state-1;
            return state;
        default:
            return state;
    }
}
 const store=createStore(reducer);
 function listener(){
    console.log(store.getState())}
 store.subscribe(listener);//打印出state的值
 store.dispatch(add())//接受返回值{type:'增加'}从而改变state的值
 store.dispatch(sub())//接受返回值{type:'减少'}从而改变state的值

最终打印出的值即为1和0.下面再看下异步redux和在react脚手架中的应用

//fn.js
const ADD='增加';
const SUB='减少';

export function add(){
    return {type:'增加'}
}//同步
export function sub(){
    return {type:'减少'}
}//同步
export function remove(){
    return(dispatch=>{setTimeout(()=>{dispatch({type:'减少'})},1000)})
}//异步改变state
export function reducer(state=0,action){
    switch(action.type){
        case ADD:
            state=state+1;
            return state;
        case SUB:
            state=state-1;
            return state;
        default:
            return state;
    }
}

//App.js
import React ,{Component}from 'react';
import './App.css';
class App extends Component{

    render(){
        return (
            <div className="App" >
                {console.log(this.props)}
                <p>{this.props.store.getState()}</p>//查看state值的变化
                <button onClick={()=>{this.props.store.dispatch(this.props.add())}}>增加</button>
                <button onClick={()=>{this.props.store.dispatch(this.props.sub())}}>减少</button>
                <button onClick={()=>{this.props.store.dispatch(this.props.remove())}}>异步</button>
            </div>
        );}
}
export default App;

//redux1.js
import {createStore,applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import {reducer} from './fn'
export  function configureStore(){
    console.log(createStore);
    const store=createStore(reducer,applyMiddleware(thunk));
    return store;
}
//applyMiddleware为中间件，用于解决异步redux

//index.js
import {configureStore} from './redux1'
import {add,sub,remove} from './fn'
const store=configureStore()
render();
function render(){

    ReactDOM.render(<App add={add} sub={sub}  remove={remove}  store={store}/>,
        document.getElementById('root'));
}
store.subscribe(render);//监听state值的变化，当它改变时重新执行render函数
serviceWorker.unregister();

这样便可实现异步改变state的值

下面是react-redux,它可以解决在组件嵌套中的传值问题，首先要下载react-redux，然后再下载 babel-plugin-transform-decorators-legacy，详情可见npm官网，然后便可使用装饰器完成

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {configureStore} from './redux1'
import {Provider} from 'react-redux'

const store=configureStore()

    ReactDOM.render(<Provider store={store}>
            <App/></Provider>,
        document.getElementById('root'));
serviceWorker.unregister();

 

import React ,{Component}from 'react';
import './App.css';
import {connect} from 'react-redux';
import {add,sub,remove} from './fn.js'
@connect(state=>({num:state}),{add,sub,remove})//装饰器
class App extends Component{

    render(){
        return (
            <div className="App" >
                <p>{this.props.num}</p>
                <button onClick={()=>{this.props.add()}}>增加</button>
                <button onClick={()=>{this.props.sub()}}>减少</button>
                <button onClick={()=>{this.props.remove()}}>异步</button>
            </div>
        );}
}
export default App;

其余的代码则和前面一样，这样便可通过props改变和查看state的值