React-Redux全局状态管理-组件通信传参（重要1/3）

1、安装依赖：

npm install --save redux 
npm install --save react-redux

阿里爸爸团队提供国内镜像下载速度更快：淘宝镜像

2、index.js下引入依赖并配置

//引入依赖
import {Provider} from 'react-redux'; 
import {createStore} from 'redux'; 

//配置redux
const store = createStore((state = {
   nav : 0,//初始化参数
   content:false,
}, action) => {
    switch (action.type) {=
        case 'toggleNavIndex'://两地通信唯一标识
            return {
                //解构仓库，且覆盖原状态
                ...state,//（必须）
                nav:action.index//（需更新的状态）
            }
        case 'NavIndex'://两地通信唯一标识
            return {
                //解构仓库，且覆盖原状态
                ...state,//（必须）
                content:action.index//（需更新的状态）
            }
        default:
            return state
    }
})

//实例化
ReactDOM.render(
    <Provider store={store}>
        <App></App>
    </Provider>
, document.getElementById('root'));
//实例化使用<Provider>标签封闭<App />,且注入store={store}，至此index.js配置完毕

3、使用仓库状态与更新

//引入依赖
import { connect } from 'react-redux';

//配置redux
class Qcbox extends Component {
 componentDidMount() {
//仓库回调
  this.props.potential()
 }
}
render() {
   return (
       <div className="qcbox">这里有{this.props.nav}只羊</div>
   )
}

export default connect((state) => {
    //获取到仓库的state
    return state
}, (dispatch) => {
    //用dispatch触发仓库中的action
    return {
        potential() {
            dispatch({
                type: "toggleNavIndex",
                nav: 1
            })
        }
    }
})(Qcbox);

看不看无所谓的总结：

到这里redex都已经上货完毕了，可能会问，为什么不讲原理。在我看来原理是比较抽象的东西，暂时不看也罢，除非你已经在某个层次，自然会去看，自然会看懂，现阶段我们只是要用它，熟悉他的运作，毕竟知识是需要积累的过程。（避坑成功/偷笑.jpg）

还有大家看了以上的操作步骤会发现，这个仓库搭建与使用很繁琐有没有，各种构造语句。似乎本地存储也能做到类似的更新状态，使用状态的目的，而且语句方法更简单，为什么不采用？

从两点讲讲你就明白取舍了：

1、状态-->页面渲染-->状态更新-->页面主动更新；这是数据双向绑定的优势。本地储存即使更新状态，页面是无法更新的，这就需要重复读写，增加了复杂度。

2、本地存储数据类型单一使用难度增加、浏览器隐私模式下无法读取数据、还有量大出现页面卡顿的问题，机制的缘故，有可能出现各种各样的问题。

光凭第二点就能看出本地存储并不适用我们全局状态管理。反而redex+本地存储打配合能更大的发挥作用。