路由传参与redux

一：路由传参

1·1：路由传参的第一种方式params

声明式

params传参的步骤：

第一步：在Router标签后面拼接传递参数的名字（给谁传值就写在那个路径后面）

 <Route path="/home/:name" component={Home} />

第二步：设置发送的数据

<Link to="/home/我是参数">去Home</Link>

第三步：在需要接收的路由组建中使用this.props.match.params.name接收

componentWillMount(){
        console.log(this.props.match.params.name)
  }

编程式

第一步：在Router标签后面拼接传递参数的名字（给谁传值就写在那个路径后面）

 <Route path="/home/:name" component={Home} />

第二步：设置发送的数据

<b onClick={()=>{this.props.history.push("/home/编程式参数")}}>点击给home传递参数</b>

第三步：在需要接收的路由组建中使用this.props.match.params.name接收

componentWillMount(){
        console.log(this.props.match.params.name)
  }

params传参的优缺点

优点：刷新地址栏，参数依然存在

缺点：： 只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。

1·2：路由传参的第二种方式state

声明式

第一步：设置发送的数据

 <Link to={{pathname:"/news",state:{name:"我是state的传递参数"}}}>去news页面传参</Link>

第二步：在接受页面进行接受

 componentWillMount(){
        console.log(this.props.location.state.name) 
}

编程式

第一步：设置发送的数据

 <strong onClick={()=>{this.fun()}}>点击传递</strong>
 fun(){
  this.props.history.push({pathname:"/news",state:{name:"我是state的传递参数"}})
    }

第二步：在接受页面进行接受

 componentWillMount(){
        console.log(this.props.location.state.name) 
  }

二：路由render的渲染方法：

2·1：数据传递

【一般情况下不推荐使用该方法，几乎不会再路由规则里进行数据的传递】

render调用一个函数那么我们就可以决定什么时候渲染他， 同时传入props，那么就可以在路由组件中使用history: {…}, location: {…}, match: {…}这几个对象

语法：

//修改Route 里面的组件调用方式为:
render={(props)=>{return <组件/>}}

第一步：在路由配置规则里,向组件内部进行传值

 <Route path="/news" render={(props) => { return (<News {...props} text="传递的参数" />) }} />

第二步：在组件内部进行参数的渲染（取值）

render() {
        console.log(this.props.text)
        return (
            <div>
                <h1> 消息</h1>
            </div>
        )
  }

2·2：路由验证

如果想对路由进行验证的话

只需要在函数中进行逻辑编写 既可以设置具体渲染那个组件

<Route path="/news" render={(props) => { return false? <News {...props} />:<Redirect to="/home"/> }} />

三：redux的基础

Redux是为javascript应用程序提供一个状态管理工具

redux是专门作状态管理的js库（不是react插件库可以用在其他js框架中例如vue，但是基本用在react中

3·1：什么时候用redux

• 某个组件的状态需要共享的时候

• 某个组件的状态需要在任何地方都可以拿到

• 一个组件需要改变全局状态

• 一个组件需要改变另一个组件的状态

3·2：redux的三大原则

• **单一数据源:**整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中

• **State 是只读的:**唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

• **使用纯函数来执行修改:**为了描述 action 如何改变 state tree ，你需要编写 reducers(一些纯函数，它接收先前的 state 和 action，)

3·3：redux的常用概念

• Store：管理着整个应用的状态，可以通过**getState()**来重新获得最新的状态(state)

• **Action:是唯一可以改变状态(state)**的方式

  【Action是修改的动作，可以通过dispatch()方法来进行调用】

• Reducer: Reducer 是一个纯函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。（纯函数就是只要传入相同的参数，每次都应返回相同的结果）。

3·4：redux的常用方法：

• createStore（）作用：创建一个Redux 中的核心对象，存放应用中所有的state

  一个应用只能有个store。函数返回store对象。

  在引入redux的时候需要使用到

  import {createStore} from “redux”

• **getState()**作用：获取数据

  使用：store.getState().xxx

• dispatch()：触发store中的action，这是改变state的唯一方法。

  使用：store.dispatch({type:“一般情况为大写名字”})

• subscribe()：添加一个变化监听器，每当改变store的时候就会执行

  一般情况下在constructor中使用

  使用：store.subScribe(()=>{

  this.setState({
  age:store.getState().age,
  })

  })

3·5：redux的读取数据的使用

第一步：下载：cnpm install --save redux

第二步:创建一个store文件夹用来保存redux的相关内容

第三步：在store的index文件中对redux进行配置

//1.引用redux
import {createStore} from "redux"
let data={
    name:"xixi",
    age:18
}
//4.创建reducer，并且传入state数据，action动作
let reducer=(state=data,action)=>{  
    return state
}
//2.创建store的核心对象，并传入reducer
let store = createStore(reducer)

//3.对srore进行暴露
export default store

第四步：获取redux的值

// 导入redux
import store from "../store/index" 
<h3>对redux中值的获取----{store.getState().name}</h3>

3.6:redux中值的修改

第一步：搭建基本的redux

// 第一步:引入redux并通过createStore来创建一个redux对象
import {createStore} from "redux"

let data={
    name:"嘎嘎嘎",
    age:20,
    sex:"女"
}
let reducer=(state=data,action)=>{
switch (action.type) {
    case "ONE":
        //使用传递来的参数
        return {...state,age:state.age+action.num}
     break;
     case "TWO":
        return {...state,age:state.age-action.num}
     break;

    default:
        //一定不要忘记返回state
        return state
        break;
}
    return state

}

//第二步：新建一个store对象
let store=createStore(reducer)

//第三步：暴露出store
export default store

第二步：使用监听器和dispatch触发

constructor(props){
    super(props)
    this.state={
        name:store.getState().name,
        age:store.getState().age,
    }
    //redux中的数据改变了但是页面并没有render渲染更新
    //redux中的 subscribe() 监听器
    //他监听的是redux中的state数据是否被修改了 修改了就会自动触发
    store.subscribe(()=>{
        this.setState({
            age:store.getState().age,
        })
    })

}
 add = () => {
     //使用dispatch触发store中的action
        store.dispatch({type:"ONE",num:123})
    }
del = () => {
    //在后面是可以进行参数的传递
        store.dispatch({type:"TWO",num:987})
    }
<h3>对redux中值的获取----{store.getState().age}</h3>
    <button onClick={this.add}>-</button>
    <button onClick={this.del}>+</button>

四：redux的执行流程

• 第一步：用户在页面触发修改的操作
• 第二步：通过dispatch来触发action修改
• 第三步：action通过store进入到reducer这个方法中
• 第四步：在reducer中经过一定的逻辑操作，返回一个处理后的state
• 第五步：返回的store会返回到store中
• 第六步：用户在store中通过getState()来获取修改后的数据

getState().age}</h3>
   < button onClick={this.add}>-</button>
   < button onClick={this.del}>+</button>

四：redux的执行流程

• 第一步：用户在页面触发修改的操作
• 第二步：通过dispatch来触发action修改
• 第三步：action通过store进入到reducer这个方法中
• 第四步：在reducer中经过一定的逻辑操作，返回一个处理后的state
• 第五步：返回的store会返回到store中
• 第六步：用户在store中通过getState()来获取修改后的数据