Category: Redux

ブール値

fn main(){
	let t = true;
	let f: bool = false;

	println!("{} {}", t, f);
}

キャラクタ

fn main(){
	let c = 'z';
	let n:char = '0';
	let jp = 'あ';

	println!("{} {} {}", c, n, jp);
}

b’~’で囲んだASCII文字はバイト文字として扱われる
let chb = b’a’;
let ch = ‘a’;
let chjp = ‘あ’;

文字列
RustにはstrとStringの2種類がある。String型はプリミティブなデータ型ではない。strは文字列スライトという
let msg:&str = “Hello, Dogs!”;
let s = &msg[2..5];

fn main(){
	let msg:&str = "Hello, Dogs!";

	println!("msg.len()={}", msg.len());
	println!("msg={}", msg);
	println!("msg={}", &msg[2..5]);
}

fn main(){
	let dog = "ポチ";
	let msg = format!("{} ({}歳)", dog, 6);
	println!("{}", msg);
}

fn main(){
	let mut msg:String = String::from("Hello");
	msg = msg + " Rust!";

	println!("{}", msg);
}

push_str, insert_str, +がある

fn main(){
	let mut msg = String::from("ポチ");
	msg.push_str("Good Dog");

	println!("{}", msg);
}

fn main(){
	let mut s = String::from("ポチ");
	s.insert_str(0, "Hello");

	println!("{}", s);
}

fn main(){
	let mut msg = String::from("ポチ");
	msg = msg + "Good Dog";

	println!("{}", msg);
}

main.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import App from './components/App'

render(
	<Provider>
		<App />
	</Provider>,
	document.getElementById('app')
)

components/App.js

import React from 'react'

const App = () => (
	<div>
		Hello Redux!
	</div>
)

export default App

console.log
Provider.js:26 Uncaught TypeError: Cannot read property ‘getState’ of undefined

store定義していないから？？

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'

import App from './container/app'
import reducer from './reducer'

const store = createStore(reducer)

render(
	<Provider store={store}>
		<App />
	</Provider>,
	document.getElementById('root')
)

reducer.jsx
Reduxでは状態遷移をreducerで管理する

const initialState {
	fuga: 1
}

export default function reducer(state = initalState, action){
	switch(action.type){
		case 'INCREMENT':
		...
		default:
			return state
	}	
}

container
containerはReduxのStoreが管理する状態遷移をReactのプロパティとして流し込む
container/app.jsx

import React from 'react'
import { connect } from 'react-redux'

import App from '../component/app'

function mapStateToProps(state){
	return state
}

function mapDispatchToProps(dispatch){
	return {
		handleClick: () => { dispatch(increment())}
	}
}


export default connect(mapStateToProps)(App)

reactでviewを管理し、reducerでstateの状態遷移を行う
とりあえず、reduxの環境構築からか。

ReactJSが扱うUIのstateを管理するためのフレームワーク
Reactではstateの管理するデータフローにFluxを提案しているが、ReduxはFluxの概念をより扱いやすく設計されている

UserInput　-> View -> Action -> dispatch -> state -> state -> reducer

Actionは何をするという情報を持ったオブジェクト

{
	type: 'ADD_TODO',
	text: 'Build Redux app'
}

ActionCreator
Actionを作成するメソッド。Actionを作るのみ、Storeの

function AddTodo(text){
	return {
		type: ADD_TODO,
		text
	}
}

ActionCreatorで生成されたActionをStoreに送る
Storeのinstanceにdispatch(action)を行うことで、Storeへ変更を伝える

Storeはアプリケーションの状態(state)を保持している
アプリケーション内で一つのstateを保持している
stateへのアクセスはgetState(), stateの更新はdispatch(action)、リスナー登録はsubscribe(listener)

{
	visibilityFilter: 'SHOW_ALL',
	todos: [
		{
			text: 'Consider using Redux',
			completed: true,
		},
		{
			text: 'keep all state in a single tree',
			completed: false
		}

	]
}

dispatchされたactionとstateをReducerへ渡す
storeはdispatchされると、引数のactionと現在保持しているstateをreducerへ私、新しいstateを作成

import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)

reducerはactionとstateから新しいstateを作成して返すメソッド
Stateを変更する関数はpureな関数
viewのところがReact.js

redux Github
https://github.com/reduxjs/redux

1. Single source of truth
2. State is read-only
3. Mutations are written as pure functions

https://reactjs.org/docs/getting-started.html
https://redux.js.org/index.html

もはやreduxでは、英語のドキュメントの方が質が高く、そこから学ぶのが効率的、という認識が一般化されつつあるな。