react-redux学习初步总结

react

1.index.js文件中需要引入

a.React(把jsx编译到js需要调用一个函数, 这个函数在React叫React.createElement. 解答地址:https://segmentfault.com/q/1010000011479561,注意后面评论,查看ES6-Module),

b.ReactDOM,

c.要渲染的总组件。

示例如下:

//index.js
import React from "react";

import ReactDOM from 'react-dom';

import App from "./page/todoListRedux/app"

ReactDOM.render(<App />,document.getElementById("root"))

2.总组件中需要引入

a.React,{Component,Fragment}(Fragment页面不会渲染的包含块)

b.引入store所在位置

c.{Provider}:相当于store所作用的范围容器

d.子组件所在位置

并将总组件暴露给index

示例如下:

//app.js

import React, { Component, Fragment } from "react";

import store from "./store/store";

import { Provider } from "react-redux";

import Input from "./component/input";

export default class App extends Component {

render() {

return (

<Provider store={store}>

<Fragment>

<Input />

</Fragment>

</Provider>

)

}

}

3.store.js中需要引入

a.创建store的方法{createStore}

b.对redux的dispacth方法进行封装的方法applyMiddleware

c.rudecer(设计数据结构和actions处理)

d.thunk 实现异步action

将store暴露给总组件app.js

代码示例如下:

import { createStore, applyMiddleware } from "redux";

import reducers from "./reducers";

// import logger from "redux-logger";

import thunk from "redux-thunk";

// console.log(logger,thunk)

// import { addTodo,changeCompleted } from "./actions"

// redux-thunk实现异步action

// redux-logger是redux得日志中间件

const store = createStore(reducers,applyMiddleware(thunk))

export default store

4.actions.js

a.用变量代替action字符串

b.action接收的参数返回出去,传递给reducers

c.将action暴露给子组件(即:用户具体的操作行为)

示例如下:

export const ADD_TODO = "ADD_TODO";

export function addTodoAction({id,text}) {

return {

type: ADD_TODO,

text,

id

}

}

5.reduers.js

a.引入合并处理action方法的方法:combineReducers

b.定义state数据结构

c.定义function,根据用户操作,dispatch过来的action中的type对state数据中的具体的数据进行操作

d.合并function,将其放入reducers(注:只有合并以后的function在子组件中才能获取到)

e.将reducers暴露给store

代码示例如下:

import { combineReducers } from "redux";

const initdata = {

todoList: [{

id: 0,

text: "HTML",

completed: true

}, {

id: 1,

text: "CSS",

completed: false

}, {

id: 2,

text: "JS",

completed: true

}, {

id: 3,

text: "NodeJs",

completed: false

}],

id:4,

showType:"All"

}

function todoList(state=initdata.todoList,action){

// console.log(action)

let newArr=JSON.parse(JSON.stringify(state))

if(action.type==="ADD_TODO"){

newArr.push({

id:action.id,

text:action.text,

completed:false

})

}else if(action.type==="COMPLETED_TODO"){

newArr.map((item)=>{

if(item.id===action.id){

item.completed=!item.completed

}

return item

})

}

return newArr

}

const reducers=combineReducers({

todoList,id,showType

})

export default reducers;

6.子组件

a.引入React,{Component}

b.引入connect(连接ruducers里面的数据)

c.引入actions.js中的用户操作行为方法

d.定义组件名称,从this.props中获取自己需要的方法/数据(或参数),并根据用户行为触发不同的action,通过dispatch来对数据进行相应操作

e.连接reducers,并从中获取需要的数据放入this.props中

代码示例如下:

import React, { Component, Fragment } from "react";

import {connect} from "react-redux";

import styles from "../static/style.css"

import {changeCompleted} from "../store/actions"

class List extends Component {

render() {

const {dispatch,showType}=this.props

let list=this.props.todoList.filter((item)=>{

if(showType==="All"){

return item

}else if(showType==="WillDo"){

return item.completed===false

}else if(showType==="Did"){

return item.completed===true

}

})

return (

<Fragment>

<ul>

{

list.map((item,index)=>{

return <li key={index}

className={styles[item.completed?'active':""]}

onClick={()=>{

// console.log(item.id)

dispatch(changeCompleted(item.id))

}}

>{item.text}</li>

})

}

</ul>

</Fragment>

)

}

}

export default connect(function(state){

return state

})(List)

初步总结:react-redux的初步使用体验

github:https://github.com/aliAjax/reactTodoListReduxDemo.git

包含了不用redux的todoList Demo

以上是 react-redux学习初步总结 的全部内容, 来源链接: utcz.com/z/384322.html

回到顶部