React-Redux入门

Redux入门

写在前面的一些话

首先我们来定义一下redux

    redux是用来管理状态组建是一个大的仓库，跟vuex 是一样的东西，
    但是由于react并没有像vue 一样设计了vuex 所以redux并不是专门为了react设计的 而是一个js库，
    这就导致了用起来非常的生涩刚入门学起来很烦吗，而如何学好在在于思维的转变，想要学明白redux，
    就先了解他的工作模式

Redux的工作模式

先来安装一下Redux吧

npm i redux --save

先来看一下redux 的最初工作原理吧

先引入一下

import {createStore} from 'redux'

通过解构可以拿到一个函数然后我们来使用一下

createStore这个函数接受一个函数最为回调函数，所以我们创建一个函数reducer作为函数进行传入最后我们再把 store 导出。然后我们需要在index.js 里进行进行一些配置 ，前提说一下这些配置都是基础配置，后期这些配置会有更改，这里只演示redux最初的原理。

function reducer(state=0,dispatch){
        switch (dispatch.type) {
            case '吃鸡':
                return state +5
                break;
        
            default:
                    return state=0
                break;
        }
}

let store =  createStore(reducer)

然后需要在index.js里进行一些配置,把上面导出得store,在这里进行引入然后我们通过传参得方式把store 传入app组件，这样在app组件里就可以通过this.props.store.dispatch(),来进行使用了，函数得参数同步为一个对象异步为一个函数，现在我们可以管理一个state 得数据了，当然要管理多个state 还需要很多东西得配置等下后面会说，值得一提得是默认是同步得派发数据，因为我们要使用异步数据所以我们需要使用thunk所以需要下载一下npm install --save redux-thunk然后在createStore里包裹起来如下，便可以使用异步得方式来使用this.props.store.dispatch()了

import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
export default  createStore(redux,applyMiddleware(thunk))

import store from './store/index'
ReactDOM.render(
  <React.StrictMode>
      <BrowserRouter>
          <App store={store} />
      </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

这一部首先创造一个状态机state用来存状态然后通过判断 dispatch/action 用来改变状态

那么如何来获取当前的状态来改变页面呢？在index.js需要使用store.subscribe来使用数据监听，这样就可以进行数据得变化然后显示在页面上，那么这里再次提示这是基础版本，只为了先了解redux 得基本使用原理并不是最终在项目总使用得版本。

listener()
function listener(){
    ReactDOM.render(
  <React.StrictMode>
      <BrowserRouter>
          <App store={store} />
      </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);
}   
 store.subscribe(listener)

最初始的模式是可以通过这种方式来监听 状态的

那么接下来就可以通过store.dispatch来改变里面的内容了

 store.dispatch({
     type:'吃鸡'
 })

那么在这里每一次store.dispatch 都会完成触发

做完基础得下面得就是在项目中应用对比上面得稍微有一些更改，首先是监听并不需要使用store.subscribe了首先我们需要引入一下npm install --save react-redux 然后在index.js页面进行配置这样我们就可以不使用繁琐的store.subscribe()来进行数据的监听了

import  {Provider} from 'react-redux'

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

然后我们在需要需要使用的组件里引用import {connect} from 'react-redux'那么这样就可以在当前页面使用到state了，然后我们使用state的数据只需要使用this.props.xxx便可以进行使用了，同理使用dispatch也只需要this.props.xxx 便可以进行使用了,相比最初的版本方便了很多。当然下面还有简化版

function mapStateToProps(state){
        console.log(state,'真的没有吗？')
     return{
            number:state
     }
}
function mapDispatchToProps(dispatch){
        return {
        	add：()=>dispatch()
		}
}
export default  connect(mapStateToProps,mapDispatchToProps)(App)

以上的代码我们可以简化为如下看起来非常的简洁

export default  connect((state)=>({number:state}),(dispatch)=>({
    add:()=>dispatch()
}))(App)