redux笔记1

1.安装redux 使用 npm install -save redux 安装redux，注意使用-save 表示安装到依赖中；

2. 创建store文件夹，下面创建 index.js 和 reducer.js文件；

index.js：

import { createStore } from 'redux';

import reducer from './reducer';

const store = createStore(reducer);

export default store;

reducer.js

const defaultState ={

    inputValue:'默认信息',

    list:[]

};

export default (state = defaultState ,action)=>{

  return state;

}

在html中调用：

import store from './store'

constructor(props){

    super(props);

    this.state = store.getState();//redux 提供的获取数据的方法

    console.log(this.state);

}

3. 安装chrome扩展工具： redux devtools

用state 初始化 input 的 value 值，并且value改变后改变state，反过来更新input的值

首先 this.state = store.getState(); store.getState() 函数获取store中保存的状态state ，然后初始化input的value值，改变input触发onChange事件，通过action向store发送函数的命令，然后store对reducers发送原state和actoin。之后reducer通过action的type在改变state，返回state，组件subscribe监听到state发生变化，

注意的是，store是改变维护状态的，而不是reducer，他只是返回一个新的状态给store。

此外，reducer是纯函数，何为纯函数？就是给定固定的输入，肯定会输出同样的出，不会有任何副作用（对输入参数的修改，如改变state）；

如 new date()则不是纯函数！

redux中，store相当于管理员，reducer相当于其管理手册。

4.1 创建store和reducer，在组件中使用store.getState() 函数获取store中保存的状态state。

4.2 一旦组件想改变store中保存的状态，就要定义一个action，该action是一个对象，包含了type和value值，dispatch发给store；

4.3 store接受到后，自动把当前的state值和action，发给其管理手册——reducers

4.4 reducer接收到后，根据action的type，改变state，并返回state给store；

4.5 store的状态发生变化之后，组件通过 store.subscribe(()=>{}) ,监听store的状态变化，然后进行下一步的渲染；

store.dispatch(); -----------组件向store传递action的唯一方法
store.subscribe(); ----------监听store中的数据，一旦数据变化，就执行这个函数
store.getState(); ------------获取store中的最新的数据

react components如下：

class App extends Component {

  constructor(props){

    super(props);

    store.subscribe(()=>{this.handleStoreChange()})//通过subscribe监听 store 状态改变

    this.state = store.getState(); //初始化时获取store的state

  }

render() {

    return (

        <input id="box"

        value = {this.state.inputValue}

        onChange = {(e)=>{

            this.handleInputChange(e)

        }}

        />

    );

}

handleInputChange(e){

    const action ={   //组件创建action这句话，也就是告诉store，我要做什么事情。

      type:'change_input_value',

      value:e.target.value

    }

    store.dispatch(action); //这里是把这句话发送给store

  }

  handleStoreChange(){

    this.setState(store.getState())//更新组件的状态

  }

}

export default App;

对应的reducer：

const defaultState ={

    inputValue:'默认信息',

    list:[]

};

export default (state = defaultState ,action)=>{

  if(action.type === 'change_input_value'){

    let newState = JSON.parse(JSON.stringify(state));

    newState.inputValue = action.value;

    return newState;

  }

  return state;

}

5 actionType的拆分，由于在组件中和reducer中，均使用到了action的type类型，在两个页面中，一不小心写错，不容易查看，可以将type拆写成actionType的定义：

因此在store中定义actionType中定义：

export const CHANGE_INPUT_VALUE = 'change_input_value'

export const ADD_INPUT_VALUE = 'add_input_value'

export const DELETE_LIST_ITEM = 'delete_list_item'

从而在组件和reducer中使用常量的定义：

  submitData(){

    const action = {

      type:ADD_INPUT_VALUE,

    }

    store.dispatch(action);

  }

  deleteList(index){

    const action = {

      type:DELETE_LIST_ITEM,

      index

    }

    store.dispatch(action);

  }

6 使用actionCreator.js 提取组件中定义的所有action；

由于组件中定义了多个action

submitData(){

    const action = {

      type:ADD_INPUT_VALUE,

    }

    store.dispatch(action);

  }

  deleteList(index){

    const action = {

      type:DELETE_LIST_ITEM,

      index

    }

    store.dispatch(action);

  }

故，可以把这些提取到一个单独的文件中：

import {CHANGE_INPUT_VALUE,} from './actionType.js'

export const changeInputValue = (value)=> {

    return (

        {

            type:CHANGE_INPUT_VALUE,

            value

        }

    )

}

//这两种方式是一样的

export const changeInputValues = (value)=> ({

    type:CHANGE_INPUT_VALUE,

    value

})

然后在组件中定义：

store.dispatch(changeInputValue(e.target.value));

巴特西

redux笔记1

最新文章

热门文章