初学redux基础

从一个简单例子了解action、store、reducer 

先看例子

其实，redux的核心概念就是store、action、reducer，从调用关系来看如下所示

store.dispatch(action) --> reducer(state, action) --> final state

可以先看下面的极简例子有个感性的认识，下面会对三者的关系进行简单介绍

// reducer方法, 传入的参数有两个
// state: 当前的state// action: 当前触发的行为, {type: 'xx'}
// 返回值: 新的statevar reducer =function(state, action){switch(action.type){case'add_todo':return state.concat(action.text);default:return state;}};
// 创建store, 传入两个参数
// 参数1: reducer 用来修改state
// 参数2(可选): [], 默认的state值,如果不传, 则为undefinedvar store = redux.createStore(reducer,[]);
// 通过 store.getState() 可以获取当前store的状态(state)// 默认的值是 createStore 传入的第二个参数
console.log('state is: '+ store.getState());// state is:
// 通过 store.dispatch(action) 来达到修改 state 的目的
// 注意: 在redux里,唯一能够修改state的方法,就是通过 store.dispatch(action)
store.dispatch({type:'add_todo', text:'读书'});// 打印出修改后的state
console.log('state is: '+ store.getState());// state is: 读书

store.dispatch({type:'add_todo', text:'写作'});
console.log('state is: '+ store.getState());// state is: 读书,写作

store、reducer、action关联

可以结合上面的代码来看下面几段解释

1. store：对flux有了解的同学应该有所了解，store在这里代表的是数据模型，内部维护了一个state变量，用例描述应用的状态。store有两个核心方法，分别是getState、dispatch。前者用来获取store的状态（state），后者用来修改store的状态。

// 创建store, 传入两个参数
// 参数1: reducer 用来修改state
// 参数2(可选): [], 默认的state值,如果不传, 则为undefinedvar store = redux.createStore(reducer,[]);
// 通过 store.getState() 可以获取当前store的状态(state)// 默认的值是 createStore 传入的第二个参数
console.log('state is: '+ store.getState());// state is:
// 通过 store.dispatch(action) 来达到修改 state 的目的
// 注意: 在redux里,唯一能够修改state的方法,就是通过 store.dispatch(action)
store.dispatch({type:'add_todo', text:'读书'});

2.action：对行为（如用户行为）的抽象，在redux里是一个普通的js对象。redux对action的约定比较弱，除了一点，action必须有一个type字段来标识这个行为的类型。所以，下面的都是合法的action

{type:'add_todo', text:'读书'}{type:'add_todo', text:'写作'}{type:'add_todo', text:'睡觉', time:'晚上'}

3.reducer：一个普通的函数，用来修改store的状态。传入两个参数 state、action。其中，state为当前的状态（可通过store.getState()获得），而action为当前触发的行为（通过store.dispatch(action)调用触发）。reducer(state, action) 返回的值，就是store最新的state值。

// reducer方法, 传入的参数有两个
// state: 当前的state
// action: 当前触发的行为, {type: 'xx'}
// 返回值: 新的
statevar reducer =function(state, action){switch(action.type){case'add_todo':return state.concat(action.text);default:return state;}};

 

先看例子

其实，redux的核心概念就是store、action、reducer，从调用关系来看如下所示

store.dispatch(action) --> reducer(state, action) --> final state

可以先看下面的极简例子有个感性的认识，下面会对三者的关系进行简单介绍

// reducer方法, 传入的参数有两个
// state: 当前的state
// action: 当前触发的行为, {type: 'xx'}
// 返回值: 新的statevar reducer =function(state, action){switch(action.type){case'add_todo':return state.concat(action.text);default:return state;}};
// 创建store, 传入两个参数
// 参数1: reducer 用来修改state
// 参数2(可选): [], 默认的state值,如果不传, 则为undefinedvar store = redux.createStore(reducer,[]);
// 通过 store.getState() 可以获取当前store的状态(state)
// 默认的值是 createStore 传入的第二个参数
console.log('state is: '+ store.getState());// state is:
// 通过 store.dispatch(action) 来达到修改 state 的目的
// 注意: 在redux里,唯一能够修改state的方法,就是通过 store.dispatch(action)
store.dispatch({type:'add_todo', text:'读书'});// 打印出修改后的state
console.log('state is: '+ store.getState());// state is: 读书

store.dispatch({type:'add_todo', text:'写作'});
console.log('state is: '+ store.getState());// state is: 读书,写作

store、reducer、action关联

可以结合上面的代码来看下面几段解释

1. store：对flux有了解的同学应该有所了解，store在这里代表的是数据模型，内部维护了一个state变量，用例描述应用的状态。store有两个核心方法，分别是getState、dispatch。前者用来获取store的状态（state），后者用来修改store的状态。

// 创建store, 传入两个参数
// 参数1: reducer 用来修改state
// 参数2(可选): [], 默认的state值,如果不传, 则为
undefinedvar store = redux.createStore(reducer,[]);
// 通过 store.getState() 可以获取当前store的状态(state)
// 默认的值是 createStore 传入的第二个参数
console.log('state is: '+ store.getState());// state is:
// 通过 store.dispatch(action) 来达到修改 state 的目的
// 注意: 在redux里,唯一能够修改state的方法,就是通过 store.dispatch(action)
store.dispatch({type:'add_todo', text:'读书'});

1. action：对行为（如用户行为）的抽象，在redux里是一个普通的js对象。redux对action的约定比较弱，除了一点，action必须有一个type字段来标识这个行为的类型。所以，下面的都是合法的action

{type:'add_todo', text:'读书'}{type:'add_todo', text:'写作'}{type:'add_todo', text:'睡觉', time:'晚上'}

1. reducer：一个普通的函数，用来修改store的状态。传入两个参数 state、action。其中，state为当前的状态（可通过store.getState()获得），而action为当前触发的行为（通过store.dispatch(action)调用触发）。reducer(state, action) 返回的值，就是store最新的state值。

// reducer方法, 传入的参数有两个
// state: 当前的state
// action: 当前触发的行为, {type: 'xx'}
// 返回值: 新的
statevar reducer =function(state, action){switch(action.type){case'add_todo':return state.concat(action.text);default:return state;}};