react-redux 异步(redux-thunk)

缘由: 在react-redux的redux部分不支持异步代码, 当前我们其实是redux部分reducer与action-creator共同提供修改状态的方法. 异步部分在component中实现.

为了在redux中设计异步操作, 我们需要使用 redux-thunk(异步中间件)

阅读更多
react-redux

react-redux

react-redux是什么

1) 一个react插件库

2) 专门用来简化react应用中使用redux

上一篇中我们已经利用redux实现了基本的通信需求. 然而为了简化其写法.

读取数据 采用let state = this.props.store.getState();每一次读取都需要调用getState

修改数据 采用this.props.store.dispatch({type:INCREASE,data: num }) 每一次修改都需要dispatch.

我们可以通过react-redux插件来用更简单的写法更加优雅地实现上述功能.(以及解决多层传递问题)

阅读更多

export-import那些事

1. export default

1
2
export default class App extends Component {
render (){ ...
1
import App from './component/app'; //其实App不需要和export一直,import本身就默认是App导入了,此处只是自定一个引用名
阅读更多

redux 基础

1.redux是什么?

1) redux是一个独立专门用于做状态管理的JS库 (不是react插件库) 你看他的名字就没有react!

2) 它可以用在react, angular, vue等项目中, 但基本与react配合使用

3) 作用: 集中式管理react应用中多个组件共享的状态

我们目前就是’状态在哪里, 修改状态的行为就定义在哪里’, 也算是集中式管理. 但对于大型项目就很麻烦了. 思考将所有状态和方法封装在redux中, 之后传递给需要的组件.

阅读更多

初识react-router

1. 理解react-router

react的一个插件库
专门用来实现一个SPA应用(single page web application,SPA)
基于react的项目基本都会用到此库

阅读更多

组件间通信

方式一: 通过 props 传递

1) 共同的数据放在父组件上, 特有的数据放在自己组件内部(state)

2) 通过 props 可以传递一般数据和函数数据, 只能一层一层传递

3) 一般数据–>父to子–>子组件读取数据

新的数据以props出现, 因此在componentWillReceiveProps中编写ajax请求代码

4) 函数数据–>子to父–>子组件调用函数

存在的问题:

  • 孙子组件需要逐层传递
  • cousin组件需要以父组件作为媒介
  • props属性只能通过外部接口赋值, state属性只能通过this.setState设置

阅读更多

实现github用户搜索页面

几个重要实现点:

  • cousin元素之间传递数据麻烦 -> 通过父元素作为中介
  • 数据在哪个组件被使用, 被修改 -> 优先放在该组件中
  • 假如中途触发请求 -> 在页面数据变化(如搜索关键词)发送请求 -> 在componentWillReceiveProps中使用axios发送异步ajax请求
阅读更多