-
flux 弗拉克斯查看全部
-
react-redux框图:用户点击鼠标,鼠标作用在V层上(react渲染出来的界面),这就产生了一些action,action会被传入到store里面去,store里面的Mindlewore是一些中间件(接收并作用action再吐出来),实际这些action是作用在Reducer上面(就是所谓的响应),reducer决定了action以及当前state,两者结合决定页面发生什么样的变化,state变化完毕在作用到V层上(组件上),组件重新渲染展示在屏幕上,这便是完整的数据流。查看全部
-
Flux思想:用户会有许多action(行为),所有的行为由统一的一个dispatcher分发,一个action只能分发到若干个store里面去,store既保存着数据也保存着当前页面的状态,我们根据用户的行为和当前页面的状态,一个store只能向view(视图层)去传递信息,不允许view(视图层)作用于store。最后确定页面具体怎样显示,然后再由用户传入新的action。这样数据的流向(数据流:用户行为和响应的关系)就是一个单向的可预测的。查看全部
-
reducer
//响应的抽象,纯方法,传入久的状态和action,返回新的状态
例如
//action 方法
const addTodo = (text) => { return { type:'add_todo', id:nextToodId++, text } }
const todo=(state,addTodo)=>{
switcth (addTodo.type){
case'add_todo':
return{
id: addTodo.id,
text:addTodo.text,
complented:false
}
case 'toggle_todo':
if(state.id!==addTodo.id){
return state
}
return Object.assign({},state,{completed:!state.completed
})
default:
return state
}
}
查看全部 -
react组件查看全部
-
扩展知识: 1.react-redux:除了react绑定,还有ng,ng2,backbone,deku; 2.redux-thunk:实现异步(ajax调用)action; 3.redux-gen:利用生成器,实现middleware(第三方扩展)也可实现异步; 4.react-router-redux:路由与数据流;查看全部
-
Redux概述:redux是flux框架的一种实现方法。当一个页面渲染完毕之后(UI用户界面出现),用户触发了UI上的一些action,action会被送到Reducer(一个方法)里面,Reducer会更新store,然后store中还包含着当前页面的state,页面最终显示成什么样都是由state最终决定的。查看全部
-
安装:npm install react-redux npm install redux查看全部
-
npm install react-redux redux
查看全部 -
项目目录,构建介绍
查看全部 -
container和component对比
查看全部 -
组件实现方式
查看全部 -
reducer
查看全部 -
container
查看全部 -
redux data flow
查看全部
举报
0/150
提交
取消