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,组件就可以去使用共有数据了

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

  • 在方法中创建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. react-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.函数名

  1. )FluxFlux是一套前端应用的架构模式,状态管理,主要处理公共数据操作使用包括dispatcher 处理动作分发,维护Store之间的依赖关系;stores数据和逻辑部分;views,React组件作为视图同时响应用户交互actions提供给dispatcher传递数据给store
  2. )Redux概念参照flux三大原则
    • 整个应用只有唯一 一个可信数据源,也就是只有一个Store
    • state只能通过触发Action来改
    • state的更改必须写成纯函数,也就是每次更改总是返回一个新的state,在redux里这种函数称为reducer

爬。