redux数据映射创建store

1. redux数据映射

   • 创建store.js，在store中引入createStore创建的store仓库，把仓库公开，在createStore中引入reducer
   • 创建reducer.js，在reducer中创建共有数据存储的对象defaultState，把组件中共有的数据抽离到defaultState，在reducer.js创建公开方法,写入state和action参数，把默认数据defaultState（state）返回
   • 在组件中引入store，使用store下的store.getState()把共有数据赋值给组件的state，组件就可以去使用共有数据了

2. 事件操作：不要在组件中直接改动共有数据

   • 在方法中创建action，action包括方法类型和传递给reducer的参数，使用store下的dispatch方法

     把action派发给reducer

      add() {
     
             const action = {
                 type:"btn_click"//类型
             }
             store.dispatch(action)//派发给reducer
     
         }
     

   • reducer函数中第二个参数action可以拿到派发的事件,判断事件类型，由于state数据是只读的，而且函数是纯函数，所以要把state深拷贝一份，去改变新的state，改变过后把新的state用过store再发送给组件

     export default (state = defultState, action) => {
         //第二个参数接收组件派发过去的方法，第一个参数为共有的数据
         if (action.type === 'input_change') {//判断事件类型再处理
             const newState = JSON.parse(JSON.stringify(state))//state是只读的，不能直接去改动state
             newState.wordBox = action.wordBox //深拷贝一份再改动
     
             return newState
         }
         }
     

   • 在组件中声明一个方法，去调用this.setState()触发数据 变动，再使用store下store.subscribe()注册监听器，监听store中数据的变化，重新渲染视图（只需一次）

     在constructor外:
        		storeChange() {//自定义方法，调用触发数据变动
             this.setState(store.getState())
         }
         
     在constructor下:
          	this.state = store.getState();
             this.storeChange=this.storeChange.bind(this)//改变指向，重要
          store.subscribe(this.storeChange)//监听
     

3. reactt-redux数据映射

   • 创建建store

   • 创建reducer

   • 在index.js下与引入store和Provider

   • 在根组件外部包裹Provider并把store当做属性写入，所有的组件都可以去使用公有数据

     在index.js下
     	import {Provider} from 'react-redux'//引入react-redux
     	import store from './todoStore/store'//引入store
     	ReactDOM.render(
         <Provider store={store}>
           	 <App />,
       	</Provider>,
         document.getElementById('root'));
     

   • 在需要使用公有数据的组件下引入connect，并在组件公开处用connect连接store

     import { connect } from 'react-redux'//引入connect 
     
     export default connect(mapStateToprops, mapDispatchProps)(TodoList)
     mapStateToprops:数据映射
     mapDispatchProps:派发方法写在mapDispatchProps下
     

   • 创建mapStateTOprops包装对象，对象中使用state参数把共有数据映射给属性(自定义属性名)

         const mapStateToprops = (state) => ({//自动监听共有数据变动
         list: state.list,
         wordBox: state.wordBox
     })
     

   • 使用this.props.属性名把数据映射到组件中

4. react-redux派发事件：

   • 创建mapDispatchToProps的包装对象，并把所有的事件都写在包装对象下

     inputChange(e) {
             const action = {
                 type: 'input_change',
                 wordBox: e.target.value
             }
             dispatch(action)//通过形参派发action传递给reducer进行处理
         }
     

   • 在事件(函数)下创建action，使用dispatch的形参把action通过store派发给reducer处理事件，把处理后的数据返回，mapStateToprops自动监听数据变化

      else if (action.type === 'btn_click') {//判断事件类型再处理
             const newState = JSON.parse(JSON.stringify(state))//state是只读的，不能直接去改动state
             newState.list.push(state.wordBox)    
             return newState
         }
     

   • 在组件中绑定事件需要使用this.props.函数名

5. Flux

   Flux是一套前端应用的架构模式，状态管理，主要处理公共数据操作使用

   包括dispatcher 处理动作分发，维护Store之间的依赖关系;stores数据和逻辑部分；

   views，React组件作为视图同时响应用户交互

   actions提供给dispatcher传递数据给store

6. Redux概念参照flux三大选择

   • 整个应用只有唯一一个可信数据源，也就是只有一个Store
   • state只能通过触发Action来改
   • state的更改必须写成纯函数，也就是每次更改总是返回一个新的state，在redux里这种函数成为reducer